I am trying to display recently viewed items in a Stencil theme, but am not able to get the data on the page. I am calling the following Front Matter attribute marked as global (available on all pages) here.
Stencil Docs example
recently_viewed: null Boolean indicating whether to display recently viewed products. No filtering available.
https://stencil.bigcommerce.com/docs/front-matter-variables
recently_viewed: true
When I inspect the JSON on the page by appending '/?debug=context' to my URL, there is no data containing recently viewed items.
Has anyone else successfully displayed recently viewed items on a page in stencil?
Thanks.
This feature is currently only working for logged in customers. If you are seeing this behave abnormally from that, please let us know. It does not have feature parity with Blueprint themes' sideproductrecentlyviewed.
Related
I'm working on a custom code block for the Tapcart app version of my e-commerce site on Shopify. They have the ability to add HTML, CSS and/or JS in a custom code block.
However, I cannot get the html to output the custom fragrance notes (my custom metafield) for the product. Matter of fact, I can't get anything to output- it's just blank.
Thoughts? Appreciate your help!
{{product.metafields.custom.fragrance_notes}}
I tried {{product.metafields.custom.fragrance_notes}} expecting it to output the plain text multi-line of each individual product's fragrance notes (which I have as a custom metafield for each product) but instead nothing displays at all.
When asking for metafield data you can often meet with success by asking for the value stored at that key.
{{product.metafields.custom.fragrance_notes.value}}
Since the namespace is custom, the key is fragrence_notes and what you want to use or display is the value. So it is a key:value thing.
Of course, if your metafield is empty, you won't see anything no matter what.
I am trying to add a small 'lockup' / promo to a page that loads information dynamically based on page.metafield information. Replacing images, video ID's etc. Which all works just fine.
My client is asking for a small area to display a product that relates to this dynamically changing content and I am struggling to come up with a good way to do this.
The current setup is that we have 30 pages with a set of 8 metafields each page. Each one of these pages must show a different , single product with an image, title, price, buy button and another button that links out to a partner site.
I can create snippet and load almost all of this info through metafields manually (price, title etc the client could just add to another metafield) but I would prefer to load a product to pull this info so it can be added to cart. Although I can add product data manually, I still don't actually know which product will get added to the cart, because I'm on a 'page' not a 'product'.
The products themselves are using a custom template that is different to the rest of the site so that seems like its not an option. The template for this content page is just 'page' but surely I can call the product object someway? If the client entered a product ID in the metafields, is there a way of pulling that IDs data easily?
Whatever you mean by pulling ID's, but there are a couple of ways of dealing with this. One, you have a Storefront API token, allowing you to freely and securely call Shopify with JS and get back all the data about the ID you're interested in. Or, you have an App installed in the store, in which case you can setup and callback an App Proxy, providing that ID, and getting back all the info you need. Lots of options!
Which ways are possible to edit the live preview of the product page in Shopify with Inputboxes next to it?
Let's say the product is a poster, and i want to add a custom text on it.
When typing into the inputbox the text changes in real time on the product.
Can this be implemented in the shopify code with the basic version of shopify?
Or does this necessarily needs an app?
ADDITIONALLY:
Let me go a bit deeper. I have a code that can generate a QR code.
Now i want that the QR code to be previewed in the product. Now position and color of the QR code is different from any product. Would that need an app?
Yes you can to an extent.
First the ground rules:
You can't modify the product from the front-end and update the content or media in the back-end - this would be a huge security hole
The changes applied to the product will be visible only to the user who changed them
The solution is to use Javascript and update the content of the front-end. If you like to store the changes for that specific user you can save them as cookie or localstorage.
If you like to share this change to other people you will need to add a custom parameter in the URL of the page and generate the content from it and share that url.
Each one of these steps will require some custom Javascript that will affect only the user in question, if you like to modify the product in the back-end directly you will need some kind of an app for this.
On my mind it can be done if the dynamic text is applied over product image.
Detailed code would be too long to write here but here are the steps:
Add an input to your product form to add a custom property (https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503)
Write a Javascript function to get input value in real time
Use this value to display it in a div in product image container
Position this div in CSS as absolute and style it as you wish
While image container position should be set as relative in CSS
HTH
The custom list app is a nice app, to show a list of items that are currently in Rally.
What I would like to get out of this list as well, is UserStories and Defects from previous Iterations.
A page can be easily setup where you have an iteration filter on top, then a list app underneath. When the page is set to show closed / past iterations it should show the user stories and defects that have been previously assigned to the applied iteration (even if they have another iteration set currently).
Is such an app available? Searching a bit did provide any usefull apps,
Blocking history seems to do a little in that area, but looks only at things that had a blocker flag set:
https://github.com/RallyApps/app-catalog/blob/master/src/legacy/BlockingHistoryApp.html
The List from this app on the other hand cannot be modified, therefor I want to combine history with the Custom Grid app as provided by Rally.
Regards
What about the Iteration Scope Change app?
Source here:
https://github.com/RallyApps/app-catalog/blob/master/src/legacy/IterationScopeChangeApp.html
It's available directly in the app catalog in the product as well.
BigCommerce allows for product options that a user can upload a file to attach to an order (think a business card printer needs art files uploaded to the order)
Once a user selects all the options, and clicks add to cart, the page uploads the selected file along with the order details and takes you to the shopping cart. The time it takes for it to load depends on the weight of the files being uploaded.
Does anyone have a solution for having a visual tool for while a file is uploading, a percentage (either bar, or numbers) can be shown (or simply a "uploading images" overlay). People who are not familiar with the site think the page has frozen - they only realize when they let it upload - sometimes files can take up to 30 seconds to upload.
Im fairly proficient at CSS and HTML5 - if there are any solutions, please advise.
Thanks!
-Sebastian
In this case, you'd need to add HTML and CSS to create and style the loading bar. For the actual function of checking the upload status and displaying the progress, I'd suggest using jQuery with form plugin (uploadProgress function).
The necessary steps required to accomplish this will be a bit different in Bigcommerce than you'd see in this blog post, but it is explains it in a bit more depth with examples