How to add compare product button - bigcommerce

I am new in bigcommerce so please let me how can i add compare product option with feature product on home page.
I have already enabled the compare checkbox from backend

The compare object is accessed via the product-listing component when viewing a category page, and home.html uses different components that would need to be modified or replaced so that the compare object is available. You can find more about the compare object on the BigCommerce dev docs here.

Related

Shopify: selecting alternate Template for "All Products" page

I am trying to customise my debut theme and am a bit stuck.
I am trying to create an alternate template for the template that shows all my products.
I am able to create an alternate collections.liquid and it also shows up in the admin an it all works fine. But my confusion is, this seems to be the same template for rendering the all my products (not just the products from that collection) too, but how/where select the alternate template for that in the admin?
In other words I am attempting to change the template for collections/all
By default the collections/all uses the collection.liquid file.
As you said you can create a new template collection.custom.liquid that you can use.
The interesting part is that there is no actual collection/all page in the admin. This is the default page that ALL shopify shops have (similar to the homepage/404/cart page). So you don't have access to it from the admin panel by default.
In order to change the ALL collection page you need to create it yourself. Go to your collections admin page and create a new collection with the handle all and this will overwrite the default all collection and you will be able to choose a different template for it.
TLDR; create a new "all" collection in the admin panel and choose the custom template for it.
you have check here collection type grid or list which is enabled from the theme option
collection-template.liquid file that show collection/all item list
if want to change the alternative template goto the template directory. page.collection_list.liquid

Shopify - is it possible to change the preview of a product with a inputbox?

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

Shopify: Change metafields for store

My problem is that when you login on my store - you (not necessarily registered) could add your e-mail and other information.
In this topic:
https://ecommerce.shopify.com/c/shopify-apps/t/allowing-a-customer-to-edit-their-profile-and-metadata-186665
I see that there is a possibility to change the metafields of the customer.
But I need to change the metafields of the store.
Does someone know where to find a list of requests or is there any options to change Metafields?
If you, as somebody with admin access to the store, needs to manually set or modify metafields on your store and either don't want to (or cannot) use a custom app to do so:
Get the (free) ShopifyFD extension for your browser (Link to the extension on the Chrome store)
Log in to your store and go to the 'Settings' (gear icon)
Click ShopifyFD's green '+' icon in your browser to load the extension on the page. You should now see your store metafields appear
You can now add metafields by filling in the boxes, or select existing metafields to manually edit their values.
Note: Metafields that are set by any of the apps that your are using should generally not be edited manually - changing an auto-generated field could really confuse the app that relies on it!

New module for personal collection/receive with possibility to choose shop (pickup to store)

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.

Different Variants per product: Shopify

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