AbleCommerce Forums
»
AbleCommerce
»
General Questions
»
theme development and customization help needed ver.9
Rank: Newbie
Groups: Developers, Registered
Joined: 8/16/2019(UTC)
Posts: 0
|
there are many things that needs to know. Like if i need to add custom link in header navigation menu or edit form fields how to do that. i explore ablecommerce don't provide flexibility to do customization. Customization is very limited. Also if i want to use fluid-container, how to do that? and also how to customize header layout and use full-width banner slider. and is there any other themes provided in ablecommerce. and please provide with proper and updated dev guide to work on Ablecommerce ver 9.
Looking forward for help and guidance.
|
|
|
|
|
|
Rank: Advanced Member
Groups: System, Administrators, Developers, Registered, HelpDesk
Joined: 10/29/2018(UTC)
Posts: 472
Thanks: 4 times
Was thanked: 34 time(s) in 33 post(s)
|
Hi there, You have a lot of great questions, but some may be answered by the documentation we have for Customizing your storefront. Please go to this URL - http://help.ablecommerce...edProjects/Ablecommerce/go to the Website Menu to find instructions for doing a lot of the things you asked about. Keep in mind that each page within the application has a blue circle help icon and this will go directly to the documentation for the page you are looking at. If there are other places that you need to customize, please try to be very specific so I can try to explain where the changes need to be made. Thanks Katie |
Thanks for your support!
Katie
Secure eCommerce Software and Hosting |
|
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909
Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
|
Hello Katie from Support,
I remember 30 years ago when we decided to go into this thing called the "Internet" and try to sell merchandise online. Not one shopping cart existed, I paid a programmer about 5K to create the most basic shopping cart imaginable back then. I have been in this business for a very long time, and I was Motorola's #1 dealer and the first to open up a shop online.
In the 30 years since then, I have gone through multiple shopping carts, and I'm now looking to once again move, in this case to Ablecommerce, so I offer this advice and I hope it is well received.
In my humble opinion, what's is going to make or break version 9 is documentation, what you have online today is two simple, it's Mickey Mouse for the people like myself who from a front-end developer who is quite experience, and would like more details with examples on the structure of the system today. I am quite proficient in Pascal, and I'm looking to become more proficient in C# and Visual Studio, so I require documentation from a developers point of view as well that goes into details, again maybe displaying simple examples.
I am pretty sure I am not the only one that would greatly benefit from better documentation. My proficiency in Pascal will give me the ability to create desktop applications rapidly,to interface with Ablecommerce's database structure, but obviously Pascal is not as popular as C#, so I'm looking to improve my skills.
Again, documentation, but quality documentation that can satisfy the need of both a front-end and back-end developer.
Just my thoughts.
|
|
|
|
|
|
Rank: Advanced Member
Groups: System, Administrators, Developers, Registered, HelpDesk
Joined: 10/29/2018(UTC)
Posts: 472
Thanks: 4 times
Was thanked: 34 time(s) in 33 post(s)
|
Thank you for your feedback. I wasn't sure if you were looking for basic 'how to' documentation or a developer's guide to customizing. We are building a new website for developers. http://api.ablecommerce.comYou can see the start of our API docs, but we still have a way to go for new developer docs. If you are looking to edit links in the header, then you can simply modify the Widget Board and edit or add links. This doesn't require any code changes. If you are looking to make style related changes, then you can do that directly through the Website > Themes manager or by editing the custom.css file directly which is there to provide custom style overrides. I know there was a recent post about using a full-width body style. Let me see if I can find post for you. We're more than happy to answer your questions. Katie EDIT: See https://www.ablecommerce...sive-theme-limited-width for changing the page width. Edited by user Friday, August 16, 2019 4:41:16 PM(UTC)
| Reason: Not specified |
Thanks for your support!
Katie
Secure eCommerce Software and Hosting |
|
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909
Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
|
The API information is what we were looking for, at least it's a start.
Thanks Katie
|
|
|
|
|
|
Rank: Newbie
Groups: Developers, Registered
Joined: 8/16/2019(UTC)
Posts: 0
|
 Image for reference. I have read the guide. which only tells about how to configure ablecommerce according to only that provided. Nothing about dev guide etc. i get to know to make content in pages and widgets but the main structure of the theme is same and it donot provide flexibility for customization. topmenu structure stuck with default and same as header navigation menu, don't know how to add more pages in navigation or topmenu. Please assist with dev guide and also if there any other theme available other than sample theme. and theme customization doesn't means only custom CSS, i mean how to customize theme structure. Please enlighten on this Edited by user Friday, August 16, 2019 11:53:12 PM(UTC)
| Reason: Not specified
|
|
|
|
|
|
Rank: Advanced Member
Groups: System, Administrators, Developers, Registered, HelpDesk
Joined: 10/29/2018(UTC)
Posts: 472
Thanks: 4 times
Was thanked: 34 time(s) in 33 post(s)
|
It might help to become familiar with the customization capabilities that are built-in. So, for example, take a look at everything in the Website menu. The Layouts determine the overall page layout and maybe this is where you want to start your custom page.
Any page is made up of two components, a Page Template and the Inner Template (body of page).
The Page Template is where you can customize your content for everything outside of the page body. (e.g. header, footer, and sidebars)
The Page Body has its own inner layout and content design area.
The Widgets (some are configurable and some not) are then used within the Page Template or the Inner Template.
You can also create HTML snippets that can be used on any page - similar to a widget but this is only your HTML.
Widget Boards can also be created. Typical example would be a Header or Footer that is made up of a mix of HTML and widgets. They also have their own layout and designer.
Each feature described can be changed from the Retail or Admin side. If you are changing from the Retail side, then any changes are affecting that page only. If you make changes directly to the templates, from Admin side, then it will affect all pages using that template.
This is kind of an overview of the whole system. Everything mentioned has completed documentation. It would be helpful to understand how the pieces of the page fit together, and then we can talk about the 'how to' for changing parts of the page.
Once we understand your goals, then it will be easier to give some exact change so you can accomplish them. All widgets can be customized to any degree, but this requires some code changes and recompilation. Many widgets already have several built-in display settings.
Please let me know if you have any questions.
Katie
|
Thanks for your support!
Katie
Secure eCommerce Software and Hosting |
|
|
|
|
|
Rank: Newbie
Groups: Developers, Registered
Joined: 8/16/2019(UTC)
Posts: 0
|
@katie_able_support
I don't know whether i am unable to clarify that i need to add more links in header and navigation menu or you are not getting it.
I tried every widgets to remove current menu items and add new items, i was able to remove whole nav menu but i can't remove single item like dogs from dropdown. or add a new item after contact us . Please guide
and if i want to create whole new menu using html snippet how can i add system menu items.
also if i want to get full width container like container-fluid, how do i do that.
|
|
|
|
|
|
Rank: Administration
Groups: Admin, Administrators, HelpDesk, System, Authorized User, Developers, Registered
Joined: 10/5/2018(UTC)
Posts: 175
Thanks: 8 times
Was thanked: 17 time(s) in 15 post(s)
|
Quote:topmenu structure stuck with default and same as header navigation menu, don't know how to add more pages in navigation or topmenu. Please assist with dev guide and also if there any other theme available other than sample theme. and theme customization doesn't means only custom CSS, i mean how to customize theme structure. Please enlighten on this In order to add link to navigation views specific to theme you just need to duplicate that view under theme in same directory structure. Then make your updates in view HTML code. Similarly you can duplicate any widget view under theme folder and adjust its HTML accordingly. Edited by user Thursday, August 29, 2019 1:36:30 PM(UTC)
| Reason: Not specified
|
|
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704
Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
|
Hi Umar,
Most of your questions have been answered. I am just trying to organize and answering the remaining ones.
Q: I need to add custom link in the header navigation menu
To add custom link in the header navigation you need to edit the view file for the navigation menu.
For example, in our sample data, for the home page, we are using the file
\trunk\Website\Views\Shared\_StoreMenuLight.cshtml for Menu Items
&
\trunk\Website\Views\Shared\_StoreHeaderNavigation.cshtml for topbar navigation links
Simply add the new <li> tag to add a new item.
Q: I need to edit form fields how to do that
For this, you will again need to update HTML in the widget's view file.
Q: Also if I want to use fluid-container, how to do that?
To use the container fluid, again you will need to update the HTML.
Take the Home Page as an example. Home Page is using Content Pages Page Template and this page template is using NoSidebars layout file.
Please go to admin Website => Store Design => Page Layouts.
Edit NoSideBars layout and select the Design Tab. Now from the right top part for of the layout grid select to icon </> to edit the HTML.
Change the container class to container-fluid class
See the screenshots
Q: and also how to customize header layout
In our sample store, we are using the Widget Board for Header. There is a layout for a board and you can change that layout.
Please go to admin Website => Store Design => Widget Boards
Create a copy of a Widget Board and then select the Layout tab. You can change the layout or you can create a new one.
Q: Is there any other themes provided in ablecommerce
No, we haven't provided any other theme other than the Sample theme.
Please let me know if you have any other queries.
Thanks.
|
|
|
|
|
|
AbleCommerce Forums
»
AbleCommerce
»
General Questions
»
theme development and customization help needed ver.9
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close
