Requirement:
The business provides a URL in the format as (":category/:name") and against this format, system will have an SKU defined for which PDP needs to be opened without changing the URL.
e.g. for a defined URL -- https://example.com/categoryName/baseProductName and SKU (SKU123) will be configured in backend.
When a customer opens the above URL, the PDP of SKU123 should load where the URL remains the same.
Spartacus code has a constraint that PDP cannot be opened without providing a product code (SKU number) to it. We have tried to override the routing configurations but internally spartacus is redirecting to a 404 page.
In Spartacus Docs(https://sap.github.io/spartacus-docs/route-configuration/) it is mentioned that it is not allowed otherwise functionality will break.
I am looking for a workaround on the same to allow routing config as (":category/:name") and (":category/:name/:productCode") both which seems to be a constraint from Spartacus end. We can feed in the productCode but the URL needs to be as is.
The current PDP functionality should not break.
Spartacus: 1.4.4
SAP Commerce: 1905
that's an interesting question, and not straightforward to solve actually. I'll give you a few pointers to workaround.
First off, Spartacus uses the product code as a unique key in all layers of the application. The code is used in the routing logic, in the store and to load the product from the backend.
Moreover, the code is passed to the CMS, as the CMS is capable to resolve custom page structure per product; you can configure a specific CMS page structure for a specific product code or product category; therefor the product code is passed as an id to the CMS when loading.
To workaround these features you need to configure and override a number of things:
Bring product name into the routing configuration
You can easily do this with the routing configuration, or just by provide a paramsMapping from product.code to product.name. More on this can be found at the docs. Additionally, you could prettify the product name (avoid spaces and other characters to avoid ugly encoding)
Bring the category name into the routing configuration
Before you can configure the router (see 1) for the category name, you need to get the category from the backend. You can do this by normalising the (first) category from the product model. However, by default the product doesn't contain the categories, which is why you'd need to configure the OCC field configuration. It's all described at https://sap.github.io/spartacus-docs/connecting-to-other-systems/. Special attention is required for the SOLR results, as they also need to expose the categories.
Additionally, you could prettify the product name (avoid spaces and other characters to avoid ugly encoding)
Change the product key internally
To ensure that the category name and product name are used instead of the product code to store (ngrx) and load (OCC) the product, you need to trick the system. You can provide a custom implementation of the CurrentProductService, where you'd evaluate if the Router state contains the category name and product name parameters. If those parameters are available, you would concatenate them so that they can later on be reconstructed.
Load product data by category and product name
You could introduce a custom adapter to resolve the product code by it's category and product name, but i'd not recommend this. It would involve an additional API call, and that's expensive. Instead, I would implement a custom backend endpoint, that takes the the category and product name. You could still provide a custom adapter in Spartacus, for deconstructing the concatenated category and product name from step 3, as this would result in a cleaner code base.
Load CMS product page by category and product name
The CMS uses the product code (id) as well to load the right cms structure. You could do 2 things here:
a. use the same pattern from step 4; create custom OCC endpoint to resolve the product code and then load the right CMS product page structure
b. use a static (but existing) product code in a customer OccCmsPageAdapter, to load the same CMS structure for all product pages. This will obviously block existing CMS functionality, but it might be ok. Or at least for your first implementation you can get it to work with this workaround.
Hope that gives you an idea or 2.
All of this being said, I believe this is quite an uncommon requirement. Not that you need pretty URLs and want to use the product name as a unique "code". But using both the category name and product name as a unique key. If possible, I'd try to move into this pattern:
use the product category and product name in the title for SEO purposes (exactly as you require)
only depend on the product code as being the unique property
change the product code structure in the backend; the product.code there are various ways to do this, the idea is that the actual product code could be stored in an alternative field, and the generated (based on name) product.code in the native code field.
all application logic (UIs, APIs, SOLR, Spartacus) will transparently use the product name as the unique key.
Related
I've been using Bigcommerce's csv import to create and update simple products with c# and headless browser control. This is a relatively easy method as I can include custom fields, category names, images, GPS information, and all of the other fields that the csv import allows. Even so, my long term goal will be to move to the API. So far it appears that the API is very limited. For instance, instead of just including a category name with the new product, you have to include a category ID. As far as I can see, that would mean that for every new product I would have to create the categories for the product, then retrieve the category(s) id with an API call and lastly create the product. It appears that this is just the beginning. It appears that many of the fields that are easily included in the csv now have to be created and then attached to the product. Am I missing something?
After creating custom product page in Blueprint and adding an option set with over 30 different options, I figured that the scss/js won't be applied to another product even if they use the same custom template, due to the fact that the only way to target each option is by using its ID. The template becomes no longer valid for another product, since the JS is targeting IDs that don't exist for the new product. Did the regular API call with the idea of copy/pasting product option ids from one product to another, but unfortunately the product option IDs are read-only. Any ideas ??? Thank you in advance.
On this page https://stencil.bigcommerce.com/docs/product-resources BigCommerce has mentioned that Product Object has "Options" but in the theme, I am not able to retrieve anything from options property. I am trying to access this in Category Page.
I want to do above because I have to add product attributes on product listing page "templates\components\products\card.html". I need this here because I have to remove quick view option and directly put the product option under product title on this page. Over here I am able to get product's id, name, sku etc but not getting any properties from product options.
I have already asked to BigCommerce Support team and they don't have any solutions and referred me to check here.
The category page calls the common product card model, which does not include the product options property:
https://stencil.bigcommerce.com/docs/common-product-card-model
To get product option data on the category page, you'll need to call the API. One lightweight solution for handling this is to use AWS Lambda with Amazon API Gateway. API Gateway defines an endpoint URL that you can use to trigger a Lambda function that runs a request to the BigCommerce API for product data.
https://docs.aws.amazon.com/lambda/latest/dg/with-on-demand-https.html
I've been asked by a client is it possible for them to be able to manually order product(Types) on the front-end instead of using the default A-Z option.
For example:
Customer visits product listing page
Selects product type from the filterable options E.G "t-shirts"
Products show based on that query but are organised how they have defined possibly in the backend somewhere, or as a Shopify setting that I setup.
I can't seem to find anything from digging around on the internet and I can't think how I'd do this on my own but wondered if anyone else ha had experience or ideas for how this could be achieved.
You could define a collection with the condition "Product type is equal to your_type". Then after you save the collection you can choose to order the products manually (the default is alphabetically).
I'm working on a store that has two types of products: perishable food and general merchandise. The food must always be shipped overnight via FedEx, and the other merchandise must always be shipped via USPS. If somebody orders products from both categories, they must be shipped separately.
Do you know of an existing module or configuration settings that would allow for this?
If not, it sounds like a custom module would be the other solution. In this case, what is the best approach? I'm thinking it would be splitting the order into a multi-address shipment, using the same address for both but with different shipping methods. Unfortunately I'm not sure how to do this programatically, so any tutorials/samples/resources would be greatly appreciated.
Probably the sanest way to handle this would be to create two orders per product type, each shipping with a different carrier to the same address. This also IMO makes more sense from a stores tracking perspective as you can handle each independently from each other.
To get you on the right track(since Magento is especially cryptic in this part of itself) you should read the Inchoo programmatically create order in Magento post and by the same author Programatically create customer and order in Magento with full blown one page checkout.
Basically as I see this going is:
Get the customer order
Itinerate through each product inside the order and split it up in two arrays for each product type
Create a separate order for each product type and use the different shipping methods for each.
You will probably have to extend a some controllers OR do it the non-standard way and use helper functions for this, the hard parts will be integrating the payment/shipping modules inside your order process. Going this way will have you creating the full checkout process as the one page checkout Magento provides won't really work and is too much pain to get to work because of the way it uses AJAX.
Also another alternative is to hook in to Magento's pre-create order events and create the orders there using already defined order data split it up in two orders, but this is something I never heard or saw implemented at the moment so you'd have to do it "blindfolded" so to speak.
An easier approach would be to use a custom field that defines your product's shipping method, this way you just add that and don't care about custom orders. You just react with that, however tracking will become mostly impossible IMO.
Over-ride the Free Shipping module.
You can setup a sales rule that applies to certain products and makes them 'Free Shipping', leaving the other products to your chosen main shipment provider.
You will need to see how this works, however, the point is that Magento does have something built in to split an order into two shipping categories, albeit only a sales rule on free shipping. But you have source code...