I am developing a custom theme for a client, and the client has asked for a customizable, user-facing product "creation" form, similar in form and function to this pretty nice example from Ollie.
My problem is two-fold:
How to implement this in the BigCommerce dashboard Products section?
How to then go about building this with Stencil?
My initial thoughts are:
How to implement this in the BigCommerce dashboard Products section?
This seems pretty straightforward to me, though I am new to BigCommerce. I am imagining creating a single "Customized Kit" product with an option set containing the different variants that can arise from the customization process.
How to then go about building this with Stencil?
Here is where I'm a bit more muddy due to my lack of experience with BigCommerce and the Stencil structure. My first guess is: I create a custom form component that exposes the "Customized Kit" Product object to the context and then, on "Add Kit to Cart" click, somehow matches the attributes the user just laid out with the closest product variant. From there, however, I am unclear on the specific components that may need to be extended, which event hooks may need to be called, and how to link the whole thing into the "Add to Cart" functionality (I'm guessing I just create a separate add-customized-to-cart.html template).
Thanks, and for reference I am extending the latest Cornerstone theme (2.2.1-rc.2).
Related
I am building a new Shopify public app that displays a custom input in the product listing page (at the customer side).
So to enable this, the Shopify Admin should be able to choose specific products to enable this input. And I see two ways to implement this.
Extend Add/Edit product form to add a new section that houses my app-specific config options. See the image for an example.
If the 1st option is not possible, I will provide a separate form on my app page to select products and configure my app-specific options.
So is it possible to do #1? Also, which option is the better way of doing things here?
Any links to documentation would be helpful.
You can't modify the admin panel in any form using an App.
The only thing you can do on these pages is to add a link inside the "More actions" to your app page.
You can use extensions/bookmarklets/userscripts to create some custom logic to modify the admin page and communicate in some overly complicated way with your app but it will require more steps for the customer to work with your app which is not a very friendly way and you may not pass the review process for public apps.
TL;DR you must handle everything from your app screens and you can't modify the admin front-end in any form to add additional stuffs or modify existing ones.
Is it possible to have a checkbox on the product page that are upselling the current product? For example if the user wants to buy a computer they might want to add a mouse, is that possible to implement on the product page for the computer by adding a checkbox that says "Add a mouse +50 SEK", and mouse in this case is referring to another existing product?
natively you can add a customized checkbox value to your pdp. You would do this under Products > View > Edit > Customizations. Select checkbox. Then enter rules to increase the price when selected. However, this is not tied directly to the product, so you'd have to run your own custom logic to handle inventory if you go this route.
Another option is to use a picklist. This is in the same location as checkbox. However the difference is that you can directly link this to a product on your storefront and not have to worry about inventory as it can be handled within BC if you select that option.
A third option is to use an app from the App Marketplace. I've used the BuyButtons app + an HTML widget on the pdp in a quick test to see how this would look. It would need some tweaking to get it to how you'd like, but it was fairly straight forward.
There are likely many other ways to accomplish this, though! These are just some native options & an app option. Thanks!
I am trying to write a Shopify application and I want to add a section to the product page when the store owner installed my app. I tried this by adding a custom script tag in the shop template and this tag will load and inject my desired HTML into the page. It's work but it needs to force the store owner to change the product page template and its not user-friendly.
I see some apps in the Shopify app store that can change the product page after you install them without needs add any part to the product page template. How they do this work? I can't find the correct way in the Shopify documents.
You can change the Shopify theme of the shop using The API for Assets:
However as drip mentioned this is not a good idea:
If you change the theme auto-magically via code, you are looking for trouble. A lot of things can go wrong - simply you cannot cater for all themes and their changes over time! So you could possibly leave a broken page after the change. The e-shop owner won't be impressed! Actually a lot of the 1* reviews of apps are for that reason!
What would happen if the eshop owner removes your app? He won't know what code to remove.
So, most apps ask the user to add the app code. They provide detailed instructions of course.
Fyi, another problematic approach is the following:
Some apps may attempt to change the DOM "on the fly", by first locating an existing DOM element (a lot of theme-specific if statements to do that with any degree of success) and, then insert the app's DOM elements.
That's very messy and problematic as well, but at least you do not risk ruining the owner's theme files. In the worst case he can uninstall your app and he 'll be ok.
I want to create an e-commerce shop with : WP, Easy digital downloads and Frontend submissions.
To do so, I need to customize forms. As an example: I need to add & remove (or hide) fields on the fes_registration_form without breaking functions behind it.
I don't have a good vision of how the easy digital downloads plugin works so I don't know where to do my updates (don't want to break everything).
Could you please tell me how to proceed to add and remove fields on the fes_registration_form ?
I need to do the same job on the profile form and on the new product ones.
thank you
You can easily add and remove form fields for the profile and product submission via the built in form builder. There is a simple drag and drop system.
https://docs.easydigitaldownloads.com/article/962-frontend-submissions-form-builder
For further custom work you would need to get your hands dirty. I have just completed a major project in totally changing some functions within the forms. This involves a combination of hooks, filters and extending some of the classes provided by the FES extension.
So, I'm pretty familiar with web forms and how to build re-usable .ascx controls.
My contrived example that I'd like to solve in ASP.NET MVC:
My product sells stuff
My product offers memberships to clients
(Think of a health club where they have memberships that are purchased with a credit card as well as a retail shop where they take credit cards for payment for product).
I need to have a control where an existing client can pay for either type of product with any one of a list of saved credit cards or enter a new card.
Web forms - CreditCardEntryControl.ascx - When the "Complete Purchase" form on the .aspx page is submitted, I get the necessary information from the child control and do what I have to do.
How is this same sort of thing accomplished with Razor views?
So, I would have a model that contains "NameOnCard", "CreditCardNumber", "Cvv", "ExpMonth", "ExpYear". It would also have a nullable "SelectedStoredCreditCardId".
Then, on the parent "page" I would have information about what was being purchased (retail item or membership or whatever)...that's where the form would live that would get posted.
How do I get the "child" elements on the CreditCardEntry partial (or whatever) to be posted with the form so I can do what I have to do?
Doesn't seem like a new problem...I'm just hoping someone can point me at an elegant solution.
Thanks
For this, I'd use Razor editor templates.
Create a class (i.e. CreditCardInfo) that contains all the properties of your credit card form. Add a property of this type to viewmodels of your "parent" pages. In the view of the parent page you'd do something like:
#Html.EditorFor(model => model.CreditCardInfo)
This would ensure that all fields from your credit card info (sub)form would be created with proper names so they can be bound on submit in your controller.
You could achieve similar effect with a partial view, but you'd have difficulty binding the values if the credit card information needs to be part of the (larger) form from the parent page.
you can do the same thing leveraging partial views.
here is a get you started tutorial
hope it helps