How to create new template in Cornerstone theme using stencil framework - bigcommerce

I am new to Bigcommerce, I need to create a page template in my Bigcommerce theme (Cornerstone).
I have followed the documentation but its redirected to 404 page. Please help me in this.
I have also tried with the below link but the Url redirected to 404 page
Creating a custom page template in stencil for bigcommerce
Note : I have installed stencil framework in local environment and trying it
https://developer.bigcommerce.com/stencil-docs/template-files/custom-templates/about-custom-templates

One common cause for 404 errors when working with custom templates locally is that the page the custom template has been mapped to isn't a page that exists in the live store. For example, if you map "custom-product.html":"/my-product/" in your .stencil file, you'll need to have created a product page in your live store with the URL /my-product/. The template needs to map to a live page of the same type: if you're creating a webpage, you'll need to map to a real webpage; if you're creating a category page, you'd map the custom template to one of your existing category URLs. Hope this helps!

Related

How to integrate a landing page with a Vue SPA?

So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.

How can I deep link into a Vue.js project on GitHub Pages?

I have a practise repository in GitHub (see https://jdomleo.github.io/vue-deploy-practise).
Navigate to "About" in the navigational list at the top:
You will see in the URL, it has appened /about, as expected. However, if I give people the URL https://jdomleo.github.io/vue-deploy-practise/about, they get a 404 error from GitHub Pages.
My question is, how can I configure my Vue.js project to allow deep linking?
See link to GitHub repository https://github.com/JDomleo/vue-deploy-practise.
You have to add a custom 404.html page to your github pages that reroutes the request using javascript.
The first problem though is that you have enabled HTML5 History Mode, that requires a server to be set up to handle that and I don't think github pages allows for it.
Once you fixed that you have a couple of options.
Here is one example on how the 404 page uses the local storage to reroute the app. https://medium.com/swlh/how-to-host-your-angular-reactjs-vuejs-spa-on-github-pages-2d9ab102ac7b
Another is simple to change the url to a fragment instead of path, similar to the method used in this library https://github.com/rafrex/spa-github-pages. This library maight even just work for you.

Where are PHP files created by BigCommerce Stencil CLI stored?

BigCommerce has a node.js app which allows you to do Stencil development locally. Part of the simulation it gives you is URLs like http://localhost:3000/cart.php for the shopping cart page. I'd like to understand how this is done and where the cart.php file could be found.
The .php files are not available for editing; these URLs are merely proxied from BigCommerce servers when you're using the CLI.
Essentially, stencil-CLI gets the data from the cart page which is then compiled via node into the HTML output (using your local template).
To my knowledge, accessing php portions of BigCommerce to post changes is not really possible. It's the same for checkout.php as well. You'll have to post changes via scss files or via using handlebars and/or js-jquery.
Here's a similar question from BC forum:
https://forum.bigcommerce.com/s/question/0D51B00003zd4GSSAY/editing-a-php-page

How to call php file on checkout page in shopify using custom app

I am creating shopify app and there i gave option for video url or iframe in backend and now i want to access it on checkout thank you page.
Reference url of checkout page:
https://checkout.shopify.com/13865223/checkouts/8a6f73e477342f511954f161a2707135/thank_you
If you'd like to place content on the order status page (also known as the thank you page) then try creating a ScriptTag with the scope property set to order_status.
You can add content boxes to the page using the Shopify.Checkout.OrderStatus.addContentBox() JavaScript API.

How to navigate to another HTML file without single DOM?

I have created a sample application with login page and home page.
i have loaded the login page as Main Page successfully and i have homePage.html/homePage.js files. What i need to do is, when i click on Login button from loginPage.html file, user should navigate to Home Page. I couldn't see any APIs fro navigate/load to different html files.
i referred some worklight samples it says loading on same HTML using div and pageport commands.
$("#pagePort").load("pages/homePage.html", function(){
alert("Home Page Loaded")
});
Can any one help me to get resolve, how we can load another html on click of login button?
Worklight is a single DOM application, hence the notion of "pages" is an artificial one.
You have 1 singular HTML file and what you need to do is replace content inside it to display different content, or "pages".
There are numerous ways you can accomplish this. None of them relate directly to Worklight, but to the framework you select to work with, be it jQuery, jQuery Mobile, Dojo, Ionic and so on...
The important thing to remember is to never navigate away from the index.html file because you will then "lose" the Worklight context and your application will then fail loading. The reason is because from the index.html file, you load various required Worklight-related files.
In this Worklight 6.2 project I demonstrate, using jQuery Mobile, how to navigate between pages. For your purpose, think of them as a mainpage that is a login page and then some other page that is the home page...
Related:
https://stackoverflow.com/a/25060136/1530814
https://stackoverflow.com/a/22171687/1530814