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.
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.
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 want to add possibility for clients to receive orders personally in one of our shops. I tried to find some module which gives possibility to select in which shop they want to receive order but I haven't found anything for free. Because of that I want to create new module for it. What's more I'm totally new in prestashop and I don't know where to start or how to create this module. I spend two-three days reading how to do it and these are my assumptions:
New carrier module can be created by extending CarrierModule class.
I read some articles / documentation about hooks.
I have created my first carrier module by editing module attached in this article http://www.prestashop.com/blog/en/carrier_modules_functions_creation_and_configuration/.
What I achieved is that I installed module and used hook 'BeforeCarrier' to add some layout to page after selecting my carrier.
This is how my carrier should work:
It should be a part of carrier list so customer is able to select it.
If carrier is not selected nothing hapens. If carrier is selected by customer then button 'Choose shop' should be shown.
After pressing button 'Choose shop' new window should be show with addresses of our shops (instead of new window it may be placed somewhere in current page).
Window with shop adresses will contain list of addresses with radiobuttons and button to confirm selection.
After confirmation of selection window will be closed and address should be shown as a part of carreir.
E-mail with confirmation will contain information in which shop customer can collect order.
Suppose that addresses will be hardcoded in php code.
These are my questions:
I created new carrier module so I assume it works correctly (as described here http://www.prestashop.com/blog/en/carrier_modules_functions_creation_and_configuration/).
How to add new button 'Choose shop' near selected carrier?
Can I use hooks to add 'Choose shop' button?
Where should I remember choosen shop address? Has 'Carrier' class place for it?
How to add shop address to e-mails? Should I edit layouts? Does e-mail layout contain place for it or do I need to add new 'placeholder' for it?
How to show chosen address on admin side?
To describe my problem more detail I have created few scenario (see attachment).
I will be greatful for any help.
I've posted the same question on prestashop forum.
These example are usually old and poorly written. They lack structure. But for your purpose I suppose they're ok.
Use hookDisplayCarrierList($args). Check $args to see which carrier has been selected, then return <select> element which you
shop addresses. This hook is triggered every time a user selects a carrier and is return via Ajax. Therefore, you may not use ajax here.
You should include you javascript in a file. Use hookDisplayHeader to detect when to insert this file into your page:
public function hookDisplayHeader(){
$propExists = property_exists($this->context->controller, 'php_self');
if($propExists){
$controllerName = $this->context->controller->php_self;
if(in_array($controllerName, array('order', 'order-opc'))){
// $this->context->controller->addJS($this->_path.'js/customcarrier.js');
This Javascript file should check whether a valid shop has been selected before going to the next step;
Because your Js code is in a file and the hookDisplayCarrierList cannot contain any JavaScript (because it returns Ajax),
you should also make use of hookDisplayBeforeCarrier. Here you could insert you custom carrier ID - this way you'd know
when to check for errors with your JS file.
Same question as #2.
The correct way to save the information would be to add a model. CustomCarrierSelectedAddress - or something like it.
It would have these columns: id_cart, id_shop_address;
The way you implement shop addresses is up to you. You may define them as constants or even make a new model for them.
Models arent that hard to create, you just need to declare class properties, static variable $definition that's it.
You may add you own methods. You should also add createTable()/dropTable() methods for convenience.
This is more complicated. You could:
Send your own email about selected shop address.
Search the controller method which send the email you wish to change.
Then you should override that method by copying the file to your module, delete all the other methods and
rename the class definition inside -> class AdminAddressesController extends AdminAddressesControllerCore
There should be an array of email placeholders and their values, which the controllers assigns.
for example '{order_id}'. You should add your email variable to array {chosen_shop_info} and assign whole
paragraph of text to it. Then you may use it in the actual email template which you can edit in BO.
This is more or less the only way I know to edit the existing templates, because you can't do conditional statements inside email templates.
To add chosen address to order page in BO, you should use another hook - hookDisplayAdminOrder.
here you can add your own block to be display in order summary.
To find out which hooks are available, go to Hook.php and look for method exec(). Add this line error_log($hook_name).
When you perform a specific action, executed hooks will be logged and you will see what kind of hook you need.
I have started to create my eCommerce website and I have run into a road block. I have used a Shopify tutorial to create extra variants (excluding the variant options built in) to allow extra options (http://wiki.shopify.com/Line_Item_Properties). Shopify calls them line item properties. The problem I am running into is, this line property shows up for every product I add. Each product should have its one class of line properties.
Example:
Collection 'A' comes with choices 1, 2, and 3
Collection 'B' does not come with choices (but line property still shows on page)
Collection 'C' comes with choice 5, 6, and 7
Has anyone modified the products.liquid theme to allow such dynamics?
I have attached an image that represents my question. The image above is correct for the assigned product in the assigned collection. The image below should not have the line properties that are added in the product theme page. Is it possible to apply these line properties per product?
The red circle = error
What you'll need to do is create alternate product templates for the different types of products you want to display. See the section on product template variations in the Line Item Properties article on the Shopify wiki:
It’s unlikely that every product of your shop needs to collect the same data when added to the cart. For this reason Shopify supports template variants. To access this feature, head over to the Template Editor. In the sidebar click “Add a new template”. Select your product.liquid and choose a name such as “monogram”. This adds a second copy of the product.liquid to your store called product.monogram.liquid. In this file you can add the form that you wanted. Once created you can go to your product page and you will see a new option in the sidebar where you can select which template to use for the product you are looking at. This allows you to design a series of forms for various kinds of products and associate them later to the products that need them.
Other useful links:
Can I create and use an alternate template for pages, products, collections or blogs?
Alternate templates
template
I'm new to Bigcommerce and hoping someone can help me figure out if I'm doing anything wrong here. I'm simply trying to create a custom template for my product pages. I created a new file called "_product.html", uploaded it via FTP, and applied it to one of my products.
Within this file I have a default panel called ProductDetails.html. This panel makes a reference to the products thumbnail images. Everything works as expected.
However, I now copy the content from the ProductDetails.html panel and place it in a new panel called ProductInformation.html. At this point, there is no difference between ProductDetails.html and ProductInformation.html, except for the name.
I then go into my _product.html template and replace the reference to the ProductDetails panel with a reference to my new ProductInformation panel. Now, none of the snippets or global variables are being populated. They print nothing to the page.
If I put the original reference to the ProductDetails panel back, everything is displayed as expected. Is there something I'm missing here? Are the snippets and global variables used in the system-created ProductDetails panel only available in that file and not available to other custom panels created for a product page?
I really appreciate any help you can provide! Thank you!
As I recall, there is a key element inside of the ProductDetails Panel that is needed to get all the variables to work on a product page. I think the order even matters.
I would recommend using Snippets to control the information you want to swap out on a custom product page.
The ProductDetails panel populates the global variables that you are trying to use. If you do not have it on the custom page then you cannot use the variables inside of it. The workaround is to place the panel inside an HTML comment:
<!-- %%Panel.ProductDetails%% -->
That way the panel will be called by the Bigcommerce template system without affecting the rest of your layout.