I'm trying to create a modified product page in my BigCommerce Cornerstone theme and I'm following the video on the following link:
https://stencil.bigcommerce.com/docs/custom-layout-templates
The video claims that I need to use a live URL when I create a new HTML under /template/pages/custom/product and map it in the .stencil file.
The way I created a new live URL is that I created a completely empty web page. The first difference I notice though, compared to the video is that when I navigate to the page it's not completely empty as shown in the video but shows the header and footer of the website.
When the video asks to copy the contents of the original product.html into my newly created HTML under /template/pages/custom/product, the HTML markup doesn't get picked up i.e. the page will not show components of a product page.
I got stuck at this point and cannot continue with modifying the template.
If you are creating a custom product template, you would need to map it to the live URL for a product in your store. Mapping a custom product template to a web content page won't work.
It's important to note the difference between page types. If you are creating a custom category template, you would map it to an existing category page in your store, etc.
After you map the product page URL in your .stencil file, be sure to restart Stencil CLI. You'll need to restart to see the changes reflected on localhost in your browser (i.e. a blank page at the product page url if you mapped an empty html file to it).
Related
I have added a text input field to my page template, in the hope of linking it to a metafield I have created within the page.
When editing the page template, the input field does not have the icon to link to a dynamic source.
Is there anyway I can make the connection for the page metafield through the template editor?
There are no connections from a Shopify Page to a Metafield for saving. They would be read-only. If you require to save information and write it, you would have to wire up your own App Proxy based save App.
I have an array of content coming from a database that will be displayed on a page as a group of FAQs. Some of the content will have links to other internal pages on the site. How do I link to the pages using Inertia's link component so that a full page refresh doesn't happen?
It depends on what is returned after using the link. If you return a full view in the response, the page is reloaded. If you return a small JSON object or something else, you can process it without full loading.
Can someone tell me why the following component is loaded when I refresh the browser?
Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue
Let me explain.
What I want to happen and my expected output:
1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data
3.) The URL did not change.
What actually happens and the unexpected output:
1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .
3a.) The URL did not change.
Why does #2a happen? The URL has not changed but the component did.
What am I doing wrong? Here is my NuxtJS folder structure:
To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;
_myPage.vue or add a folder named _myPage containg a index.vue file inside.
But your example won't work because nuxt is missing the "doss" route from your link / menu item.
Working example;
https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue
URL path will result in /doss/xxx
Also see; Nuxt dynamic pages
I have a client request to add manageable content to the login page. I assume this would work like managing any other page, simply create a section with the necessary schema and markup, then include that section ({% section 'section_name' %}) in the customers/login.liquid theme template. Problem is I don't see an option to select the login page in the page selection drop-down when customizing the theme. How do I allow my client to customize the login page via sections?
Thanks!
The actual login template cannot have manageable sections.
The closest workaround is to create a custom page template that includes a login form. The page can include manageable sections that are accessible when customizing the theme. The only issue is that all the automatically generated login url links will not go to this page, so any instances of those links need to be adjusted in the theme.
You can manually tell the customizer where to go by adding a hash(#) at the end of the url, followed by the shopify site path you want to visit/edit.
https://<domain>.myshopify.com/admin/themes/<theme-id>/editor#/account/login
Once you enter this in the browser url bar, you'll need to hit enter twice to get the page to reload properly.
If you do this and find it keeps sending you back to the homepage, it means that accounts are disabled on the Shopify store. You can change this by going to:
Shopify Admin > Settings > Checkout > Customer accounts
Then selecting either: Accounts are optional // Account are required
I've tried to change meta tag content like
document.title = response.data.seo_page_title[0].text;
document.head.querySelector('meta[name=description]').content = response.data.seo_description;
it change the content when inspect the page but not when i use view soure. So Google, FB and Twitter can't recognize the updated content and doesn't load the proper text when i try to share the page on social media.
View Source shows the original source that has been fetched from the network - it is not the current snapshot of the page. As you have noticed - the current snapshot of the page is available in the DevTools. If you need Google / FB / etc. to see the proper text - you will have to produce this text on the server side (when composing the HTML template) instead of in the browser.