I need to generate a URL link on each product page. Each URL needs to contain custom variables specific to that product.
Like so : www.example.com/{{keywords}}/{{productID}}
My understanding is that any custom variables must be saved as metaTags.
My logic to generate the URL is as follows
Create an Embedded App.
Display a dropdown list containing all products.
Display input fields for the user to populate with the text for "keywords" and "productID"
Save this information as Meta Tags so it can be accessible within the Liquid templeting.
Example Mockup of Embedded App : https://imgur.com/D9Grv4m
Example Mockup of Generated URL: https://imgur.com/yjUb9JU
How do I solve the following issues?
How do i save "keywords" and "productID" variables for each individual product.
How do I generate a URL with these variables and populate them on each product page?(I can do it manually through editing the theme but there has to be a way to do this programmatically)
You cannot generate an URL like:
www.example.com/{{keywords}}/{{productID}}
With Shopify you instead use
www.example.com/products/product-handle
And on that product page, you can do as you please with the product ID, and any metafields you choose to maintain and create.
Related
I have made several metafields with the type as product, so I know they work, but in this section they don't show up for this link. I can hardcode the link to a specific product, but I want it to be dynamic using metafields. I'm using the palo alto theme.
and this is the result when I click the dynamic source button:
I'd rather leave any theme customization or coding as a last resort.
A link would take a metafield of type url but you are trying to add a metafield of type product. Type product stores the product object with all its data that's not what you need here if you just need to link to the product page.
Id just set up another metafield of type url and pop the url of the product in there.
I'm not familiar with where you are adding this in the Palo Alto theme but unless this is a section that appears on multiple pages, like product pages or blog pages, where you need to link to a different product on each page you may not need a metafield at all.
enter image description here
I have a project where I need to add the customized field use code dynamically , now siteifinity provides user to add in the backend pages as the picture shows. Is any there way to add through code? Now I can add more field column into the table use fluent API, but the newly added field is not shown in the backend page. how to make the newly added field to show in the backend module ?
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
I am still very new to JS, jQuery, and Ajax. I do not know the proper way to go about this. I have a page that lists products, and my job is to add the ability for the users to add tags to each product in page with the listing. So in our table that shows the products, I've added the input field with an ID of tags_#productId (so tags_10093) so that each field will be unique.
Now, I need to be able to call .on(beforeItemAdd...) to each field. On each tag add, I will be calling a function in a controller that will store the created tag to a database. I will also be using this same concept to populate the field with tags already assigned to that product on page load.
What I'm having trouble with is deciding how to write this call. The inputs are rendered in a foreach loop based on the product. Would it be "Decent", to render the Ajax script in the same foreach loop so that it can grab the correct class at the same time?
I'm trying to customize a product in the CategoryContent panel in BigCommerce. I want to change the markup for each product in the listing, but the markup for the entire product list is trapped in an uneditable blob :%%GLOBAL_CategoryProductListing%% (I'm getting really tired of these unchangable GLOBAL variables).
Is there any way around this so that I can put my own markup on each product in the list. I'm also open, reluctantly, to reconstruct the product list using the API, but I'm not sure how I can access the API from within a BigCommerce store. Is that possible?
I was able to identify Snippets/CategoryProductsItem.html as the file containing the markup for the individual items in a category list.
I hope this saves someone the time it took me to find the file.
The Snippets/CategoryProductsItem.html is the snippet used for grid category files. If you are using the list view, the file is Snippets/CategoryProductsItemList.html.
This file represents each product listing li. It acts as a template which loops through all the %%GLOBAL_CategoryProductListing%% information for this category. To add a feature to the category ProductList li add it to the Snippet, and it will be applied to each item.
Hope this helps.