broadleafcommerce-blog
broadleafcommerce-blog
Broadleaf Commerce
29 posts
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, yet priced for the mid-market, Broadleaf provides the framework for leading brands, including The Container Store, O’Reilly Auto Parts, Luxottica, and ICON Fitness.
Don't wanna be here? Send us removal request.
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Adopts Spring Boot, Announces New Merchandising Features in Version 5.2
Broadleaf Commerce, the leading digital experience platform (DXP) for customizable commerce solutions announces the release of version 5.2 (v5.2). With v5.2, Broadleaf enterprise users benefit from expanded merchandising features, Spring Boot compatibility, and new out-of-box integration options.
Included in the release are enhanced merchandising features, including A/B testing with Google Experiments, affiliate order tracking, and landing page-driven discounts. Users now have the ability to more easily create product offers based on customer segments and locale, as well as generate targeted content and pricing using geotargeting.
“A/B testing integrates Broadleaf CMS with Google Experiments to give users precise control of content variation within each page,” stated Chris Nail, Software Engineer at Broadleaf Commerce. ��Users will also be able to establish rules that allow them to choose the participants for testing.”
Accompanying the newest merchandising features, v5.2 of the Broadleaf framework includes expansive architecture upgrades, including first-class Spring Boot support, batch import, and OMS APIs. With the addition of Spring Boot, users can expect flexibility in deployment options as well as simplification of configuration.
“Broadleaf 5.2 makes significant progress to reducing the time to market for implementations,” stated Brian Polster, CEO of Broadleaf Commerce. “This release standardizes configuration around well-known patterns provided by Spring while also providing new, standard APIs for importing data and integrating order data between Broadleaf and back-end systems such as ERPs and fulfillment systems.”
Broadleaf Commerce provides robust B2C, B2B, Multi-Site, Marketplace, Multi-Tenant Enablement, and API Commerce solutions to support enterprise-level commerce for leading brands - including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For more information about the Broadleaf Commerce solution, please visit http://www.broadleafcommerce.com.
About Broadleaf Commerce, LLC Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, Broadleaf provides the framework for leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For more information, visit: http://www.broadleafcommerce.com/
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Presents Retail Innovation at IRCE 2017
Broadleaf Commerce, the leading digital experience platform (DXP) for customizable enterprise commerce solutions will showcase at the 2017 Internet Retailer Conference and Exhibition (IRCE) in Chicago, Illinois. From June 6 through June 8, nearly 600 companies and more than 10,000 attendees will gather at McCormick Place West for one of the largest eCommerce trade shows in the industry. IRCE provides an environment for retailers, solution providers, and industry experts to network and discuss the latest trends in eCommerce technology.
“IRCE provides a great opportunity to connect with the online retail community and to explore the evolving trends in eCommerce technology,” stated Neil Lynch, Solutions Consultant at Broadleaf Commerce. “We’re excited to share Broadleaf's highly customizable eCommerce framework with attendees.”
Located at booth #1115, Broadleaf will provide retailers with live web store management demonstrations using the latest version of the eCommerce framework. Attendees will be able to experience streamlined digital experience management, targeted offers, personalized customer experiences, and advanced customer care features.
Trusted by leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness, Broadleaf provides robust B2C, B2B, Multi-Site, Marketplace, API Commerce, and Multi-Tenant/SaaS Enablement platform solutions to support enterprise commerce. To meet with Broadleaf during IRCE or to schedule a private demo, contact [email protected].
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, Broadleaf provides the framework for leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For more information, visit: https://www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
O’Reilly Selects Broadleaf Commerce as Their Next Generation eCommerce Platform
O’Reilly Automotive, Inc. (Nasdaq: ORLY) announces it has chosen Broadleaf Commerce as its next generation eCommerce platform.
It was crucial to O’Reilly that the new solution would meet the complex requirements of the automotive aftermarket industry and would provide O’Reilly with advanced merchandising and marketing functionality. Due to their intricate and substantial customization needs, O’Reilly closely evaluated Broadleaf to determine its ability to handle the catalog, integration, and scalability needs.
“Within a few weeks, Broadleaf proved their ability to handle our complex challenges, including the ability to scale to millions of SKUs and handle our store integration requirements,” stated Jeff Lauro, SVP of Information Systems at O’Reilly. “With the move to Broadleaf, we will be able to modernize the overall experience for our customers.”
“The Broadleaf framework is designed for customization,” said Brian Polster, CEO of Broadleaf Commerce. “Although we have provided solutions for the automotive aftermarket industry before, O’Reilly’s requirement for deep omni-channel integration across thousands of stores was an interesting challenge. We worked together with the O’Reilly team to prove that Broadleaf could sufficiently address these problems and are excited about partnering with O’Reilly to help them achieve their vision.”
Courtesy of newly heightened merchandising and marketing functionalities, the platform will allow O’Reilly to provide customers with a uniform and optimized online and mobile experience - including enhanced on-site search mechanisms and tailored content delivery.
Broadleaf’s platform solution is trusted by Fortune 500 retailers to support enterprise-level commerce needs.
About O'Reilly Automotive, Inc.
O'Reilly Automotive, Inc. was founded in 1957 by the O'Reilly family and is one of the largest specialty retailers of automotive aftermarket parts, tools, supplies, equipment and accessories in the United States, serving both the do-it-yourself and professional service provider markets. Visit the Company's website at www.oreillyauto.com for additional information about O'Reilly, including access to online shopping and current promotions, store locations, hours and services, employment opportunities and other programs. As of December 31, 2015, the Company operated 4,571 stores in 44 states.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2C and B2B eCommerce platform solutions to simplify the complexities of omni-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, yet priced for the mid-market, Broadleaf provides the framework for leading brands, including The Container Store, Pep Boys, and ICON Health & Fitness. For more information, visit: www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Shares eCommerce Insight at B2B Online 2017
Broadleaf Commerce, the leading digital experience platform (DXP) for customizable commerce solutions will showcase at the 2017 B2B Online conference. With more than 500 companies in attendance, B2B Online provides an environment for brands and retailers to experience the latest commerce trends. The exhibition will take place at the Renaissance Hotel in downtown Chicago on May 8 and May 9.
“B2B Online is quickly becoming the go-to conference for B2B companies looking to add value online," stated Brian Polster, CEO of Broadleaf Commerce. “We look forward to discussing the future of B2B commerce - as well as the challenges and trends presented across the market.”
Located at booth 106, attendees are invited to view live demos of the latest B2B release of the platform and preview new website management features - including Configurable Products, Enhanced Promotions, and Customer Segment-Based Targeting.
On day 2 of the event, Broadleaf CEO Brian Polster and B2B Technology Lead Elbert Bautista will present alongside Rackspace Director of Technology & Strategy Tom Retelewski for the “Accelerating B2B Commerce: Technology considerations, project roadmaps, and practical strategies for quickly adding B2B value online” private luncheon workshop.
Broadleaf Commerce provides robust B2C, B2B, Multi-Site, Marketplace, Multi-Tenant Enablement, and API Commerce solutions to support leading retail brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For further information about the platform, or to schedule a private demo with Broadleaf, visit: http://www.broadleafcommerce.com.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, Broadleaf provides the framework for leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For more information, visit: https://www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Brings eCommerce to OSCON 2017
Broadleaf Commerce, the leading digital experience platform (DXP) for customizable commerce solutions will showcase at the 2017 O’Reilly Open Source Convention (OSCON) in Austin, Texas. From May 9 through May 10, more than 4,000 attendees will gather at the Austin Convention Center. OSCON provides an environment for developers, innovators, architects, and investors to discuss the latest trends in open-source technology.
“OSCON is a great opportunity to meet other developers and architects to discuss how they’re leveraging the most popular technologies in the industry,” stated Kelly Tisdell, VP of Professional Services at Broadleaf Commerce. “We’re excited to share our highly customizable, developer-friendly eCommerce framework with attendees and discuss how we’re innovating.”
Broadleaf architecture experts will be on site at booth 516, discussing technology solutions utilized by enterprise-level retailers, including open-source technologies like Java, Spring, and Hibernate. Attendees are also welcome to demo the latest release of the eCommerce framework, which includes configurable products, enhanced promotions, and targeting based on customer segments.
Broadleaf provides robust B2C, B2B, Multi-Site, Marketplace, API Commerce, and Multi-Tenant/SaaS Enablement Platform solutions to support leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. To schedule a private demo with Broadleaf, contact info(at)broadleafcommerce.com.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, Broadleaf provides the framework for leading brands, including O’Reilly Auto Parts, The Container Store, and ICON Health & Fitness. For more information, visit: http://www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce has been selected for the 2015 Best of Addison Award in the eCommerce Framework category by the Addison Award Program.
Each year, the Addison Award Program identifies companies that they believe have achieved exceptional marketing success in their local community and business category. These are local companies that enhance the positive image of small business through service to their customers and our community. These exceptional companies help make the Addison area a great place to live, work and play.
Various sources of information were gathered and analyzed to choose the winners in each category. The 2015 Addison Award Program focuses on quality, not quantity. Winners are determined based on the information gathered both internally by the Addison Award Program and data provided by third parties.
About Addison Award Program
The Addison Award Program is an annual awards program honoring the achievements and accomplishments of local businesses throughout the Addison area. Recognition is given to those companies that have shown the ability to use their best practices and implemented programs to generate competitive advantages and long-term value.
The Addison Award Program was established to recognize the best of local businesses in our community. Our organization works exclusively with local business owners, trade groups, professional associations and other business advertising and marketing groups. Our mission is to recognize the small business community's contributions to the U.S. economy.
About Broadleaf Commerce, LLC Broadleaf Commerce is the owner of an open-source eCommerce framework targeted at facilitating the development of enterprise-class, commerce-driven sites by providing a robust data and services model, a rich administration platform, and specialized tooling that takes care of core commerce functionality providing the framework for companies such as The Container Store, Pep Boys, and ICON Health & Fitness. For more information, visit: http://www.broadleafcommerce.com
0 notes
broadleafcommerce-blog · 8 years ago
Text
Takohl Influences Jewelry Market with Broadleaf and Dunn Solutions
Broadleaf Commerce, the open-source software provider for building customized eCommerce solutions, is proud to announce the site re-launch of award-winning custom jewelry design company, Takohl. Leveraging the Broadleaf platform, experts from technology consulting firm Dunn Solutions Group created the new, highly interactive website. The site features a new version of the Treasure Ring custom ring builder, enabling Takohl's clients to create their own one-of-a-kind jewelry. Takohl's newly deployed website launches with thanks to the expert guidance and services of Dunn Solutions.
Using the Treasure Ring builder, shoppers are able to try their hand at being a designer and create a ring that suits their individual style. With Treasure Rings, clients may choose a metal, stone, and an engraving. "The eCommerce platform is so organized and flexible that it gives our clients all the details they need in a beautiful and clear manner," said Christina Mooney, Manager of Production and Client Relations at Takohl.
The original version of the website was created to support only desktop browsers and did not allow for eCommerce, while the Treasure Ring ring builder was previously based on Adobe Flash and was not accessible to mobile users. ?This new state-of-the-art platform enables us to close sales so much more effectively and gives us the immediate credibility that the company deserves. The platform is easy to navigate and operating the backend is super simple,? said Tammy Kohl, Founder of Takohl.
"We are so proud of the work our partners at Dunn Solutions have done for Takohl," said Brad Buhl, COO of Broadleaf Commerce. "The newly designed Takohl website provides a seamless experience for shoppers, and enables customers to customize their jewelry in real-time ? whenever and wherever they please."
"By employing the Broadleaf framework, the new site fully supports all devices, including mobile phones and tablets," said Bill Dunn of Dunn Solutions Group. "The Treasure Ring builder is now HTML5 based, allowing it to also be accessed on all platforms." Social media capabilities were also added, including a blog, allowing Takohl to more effectively communicate with their customers. Additionally, rings designed with the ring builder may be shared via social media.
"I would recommend Broadleaf Commerce and Dunn Solutions to any business looking to take their game to a worldwide level with precision and ease," said Kohl. "Their care and professionalism was outstanding."
For more information about the new Takohl site implementation, contact Dunn Solutions athttp://www.dunnsolutions.com. For information specific to the Broadleaf Commerce platform solution, please visit http://www.broadleafcommerce.com.
About Takohl Jewelry designer Tammy Kohl was a pioneer in Chicago's West Loop when she opened Takohl - A Gallery of Exceptional Jewels in the year 1987. Since then she has been showcasing her award winning unique collections of silver, gold and platinum jewels to clients locally and around the world. Her real gift is her intuitive ability to collaborate with clients and capture their personality and sense of style. Takohl's goal is to create affordable pieces that have sentimental value for its customers. For more information about Takohl, please visit: http://takohl.com
About Dunn Solutions Group Dunn Solutions Group is a full service IT consulting firm that offers deep expertise in web and portal technology, eCommerce, mobile, and custom application development. The strong team of designers and Java developers deliver mobile friendly, well-architected and designed enterprise solutions for companies of various sizes, across all verticals. Dunn Solutions: experience features complex technical integrations, providing capabilities that include design, development, hosting, UI/UX, QA, load testing and analytics. Dunn Solutions also supports a variety of open source tools including Liferay. To learn more about Dunn Solutions Group, visit http://www.dunnsolutions.com
About Broadleaf Commerce, LLC Broadleaf Commerce is the owner of an open-source eCommerce framework targeted at facilitating the development of enterprise-class, commerce-driven sites by providing a robust data and services model, a rich administration platform, and specialized tooling that takes care of core commerce functionality - providing the framework for companies such as The Container Store, Pep Boys, and Vology. For more information, visit: http://www.broadleafcommerce.com
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Partners with Productive Edge
Broadleaf Commerce, the award-winning, open source software provider for building customized eCommerce solutions, is proud to announce its partnership with innovative enterprise software implementation firm, Productive Edge. Named twice as one of Inc. 5000's fastest-growing private companies in America, Productive Edge maintains a unique approach to development, delivering end-to-end, high performance solutions for Fortune 500 companies.
Productive Edge carries a combined 30 years of experience designing, developing and managing multi-tiered websites and web-based applications that scale effortlessly with clients' growing business.
"I am confident that our partnership with Broadleaf Commerce will allow Productive Edge to provide the ideal custom e-commerce solutions for our customers," stated Joel Livet, Managing Partner at Productive Edge. "We look forward to working with Broadleaf and using their software in many future projects."
Productive Edge will partner with Broadleaf to present robust and scalable eCommerce solutions for its clients. The partnership with Broadleaf is driven by the mutual desire to serve customers by turning complex, data-rich ideas into simple, customizable solutions. While Broadleaf provides the building blocks of the eCommerce architecture, Productive Edge provides the differentiating development and integration strategy and expertise to create vertical and horizontal solutions to solve customer problems.
"Productive Edge offers full solution eCommerce services, including custom design and development across multi-channel environments," said Brad Buhl, COO of Broadleaf Commerce. "Productive Edge will now be able to continue to leverage the Broadleaf platform to offer enterprise clients full user support from front-end to back-end."
About Productive Edge Productive Edge is a web and mobile software development company specializing in custom solutions for large enterprise clients. Productive Edge works with a variety of leading companies in various industries such as healthcare, retail, automotive, travel and manufacturing. Offering a full stack of development capabilities, providing end-to-end software solutions from concept to implementation and ongoing support. Productive Edge?s flagship office is located in Chicago, Illinois, with international offices located in Minsk (Belarus), Odessa (Ukraine) and Bangalore (India). For more information, visit: http://www.productiveedge.com/.
About Broadleaf Commerce, LLC Broadleaf Commerce is the owner of an open-source eCommerce framework targeted at facilitating the development of enterprise-class, commerce-driven sites by providing a robust data and services model, a rich administration platform, and specialized tooling that takes care of core commerce functionality - providing the framework for companies such as The Container Store, O’Reilly Auto Parts, and ICON Health &Fitness. For more information, visit: http://www.broadleafcommerce.com/
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Mentioned in Gartner Magic Quadrant for Digital Commerce Report
Broadleaf Commerce, the eCommerce platform solution provider for enterprise commerce brands, including O’Reilly Auto Parts and The Container Store, has been listed as a vendor to consider in Gartner’s Magic Quadrant for Digital Commerce report. (1)
As an enterprise open source eCommerce framework, Broadleaf provides merchandisers and marketers robust website management tools and IT teams a modern technology stack within a sought-after development environment - ensuring solutions remain current and secure.
“Our clients continue to reaffirm us as the best commerce framework for building complex or highly customized solutions,” stated Brian Polster, CEO of Broadleaf Commerce. “We take this mention from Gartner as a confirmation of what we’re about and the direction we’re headed.”
Broadleaf is full-featured, customizable, and easily integrated. From creating offers and promotions to managing the order lifecycle process, the solution supports multi-channel business practices and multi-tenant structures.
The system enables contract pricing, content targeting, and integrations to provide seamless corporate account management - ideal for B2B and B2C functionality. Designed to streamline business processes, Broadleaf provides a single admin interface for CRM, Catalog Management, Price Lists, Product Management, Content Targeting, Order Lifecycle Management, and more.
Broadleaf’s platform solution is trusted by Fortune 1000 retailers to support enterprise-level commerce needs. For more information about the enterprise eCommerce platform, contact Broadleaf directly at [email protected] or visit http://www.broadleafcommerce.com.
1 “Magic Quadrant for Digital Commerce” by Chris Fletcher, Penny Gillespie, Jason Daigler, Sandy Shen, Yanna Dharmasthira, Gene Alvarez, March 09, 2016.
Gartner does not endorse any vendor, product or service depicted in its research publications, and does not advise technology users to select only those vendors with the highest ratings or other designation. Gartner research publications consist of the opinions of Gartner's research organization and should not be construed as statements of fact. Gartner disclaims all warranties, expressed or implied, with respect to this research, including any warranties of merchantability or fitness for a particular purpose.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2C and B2B eCommerce platform solutions to simplify the complexities of omni-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 1000 corporations, with mid-market practicality, Broadleaf provides the framework for leading brands, including The Container Store, O’Reilly Auto Parts, and ICON Health & Fitness. For more information, visit: http://www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce, the open source software provider for customized B2C and B2B eCommerce platform solutions, is proud to announce its partnership with custom software development company, Dev9. Based in Kirkland, Washington, Dev9 focuses on Java and Javascript technologies to provide solutions based on Continuous Delivery - a set of processes and tools based on a combination of Lean and the heavy use of automation.
“Enterprises today face a growing set of digital needs as they interact with their customers, particularly when it comes to eCommerce,” Mike Ensor, Practice Director, Digital Transformation Services, at Dev9 stated. “We’ve worked with many different organizations and have seen a common problem: businesses are often forced to tailor their eCommerce processes around their software platform. It shouldn’t have to be that way. By leveraging Broadleaf’s platform, we’re able to work with clients to create the right-sized eCommerce solution for their business – and one that will grow easily grow as they continue to evolve as a business.”
Differentiated from traditional commerce solutions, the Broadleaf Commerce and Dev9 partnership focuses on building lean, end-to-end systems tailored on a per-client basis. Ideal for complex, multi-channel commerce requirements, Broadleaf’s feature-rich platform seamlessly harmonizes with Dev9’s foundational practices of predictive, transparent, and lean development, allowing businesses to remain flexible and scalable.
"With Dev9, we feel our teams closely align – we’re committed to providing tailored, lightweight solutions designed for continuous innovation,” stated Brad Buhl, COO at Broadleaf Commerce. “For complex enterprise commerce systems, Dev9’s focus on Continuous Delivery is a perfect fit. Iterative implementations, automated testing, continuous integration, and automated deployments provide businesses with platform stability, while lowering the cost and risk associated with monolithic projects.”
The Broadleaf and Dev9 partnership promises to deliver eCommerce systems tailored to suit business requirements - an alternative to businesses conforming to commerce systems. For more information about the Broadleaf Commerce or the Dev9 partnership, please visit: http://www.broadleafcommerce.com.
About Dev9
Dev9 is a custom software development firm focused on Java and JavaScript technologies. We build software solutions based on Continuous Delivery – a set of processes and tools that leverages a combination of transparent, predictable and lean principles deployed with a heavy emphasis on automation. Typical projects are web services at scale (e.g. Spring Boot), including integration with SQL, NoSQL and other enterprise systems. We also build client-side applications, integrating platforms such as AngularJS, Android and iOS. Developer-to-Operations and DevOps implementations often feature container strategy development (e.g. Docker). Contact Dev9 to streamline your IT investment. [email protected], (425) 296-2800.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, yet priced for the mid-market, Broadleaf provides the framework for leading brands, including The Container Store, O’Reilly Auto Parts, and ICON Health & Fitness. For more information, visit: http://www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce Honored in the 12th Annual Aggie 100
Texas A&M University (A&M) has recognized Broadleaf Commerce, the open-source software provider for customized enterprise eCommerce solutions, in their 12th annual “Aggie 100” publication. The annual “Aggie 100” recognizes companies owned or operated by former Texas A&M students with the fastest growth rate in the world. Ranked at 44th, with an annual growth rate of 43.7% from 2013 through 2015, Broadleaf Commerce was recognized on campus at a November event held within the Hall of Champions.
“It's an honor to have been recognized in this year's Aggie 100,” said Brian Polster, CEO of Broadleaf Commerce. “At Broadleaf, our mission is to enable commerce innovation by providing industry-leading custom eCommerce solutions based on modern, open-source technologies. Some of the world’s largest B2C and B2B businesses leverage Broadleaf to power their online experiences. Our adherence to the values espoused at A&M are a big part of our success.”
“The 12th Annual Aggie 100 is a very impressive representation of Aggie excellence. The companies reflect 1,352 years of experience bringing the best to their respective industries and keeping the Aggie entrepreneurial standards alive and well,” said Richard H. Lester, Executive Director of the Mays Business School’s Center for New Ventures and Entrepreneurship. “We’re so proud of these top 100 performing Aggie entrepreneurs, and we celebrate the success of all Aggie companies that live by the Aggie Code of Honor: Aggies do not lie, cheat or steal or tolerate those who do. We need more of that in today’s business world.”
To learn more about the customizable eCommerce platform solution trusted by Fortune 500 retailers, please visit www.broadleafcommerce.com or contact Broadleaf Commerce directly at [email protected].
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, yet priced for the mid-market, Broadleaf provides the framework for leading brands, including Pep Boys,The Container Store, and O’Reilly Auto Parts. For more information, visit: www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
castAR Selects Broadleaf Commerce to Build Developer Marketplace
Augmented reality company castAR has selected Broadleaf Commerce, the open-source platform provider for customizable eCommerce solutions, to build a marketplace environment for developers to upload and develop their own projects. Known for supporting the online shopping experience for retail brands, including The Container Store, Pep Boys, and ICON Health and Fitness, Broadleaf was chosen by castAR after carefully evaluating the framework’s extensibility and scalability. castAR will leverage the framework to build an environment unique to any current or previous Broadleaf Commerce implementations.
“Augmented reality will fundamentally change how people play and work together and we’re excited to be working to bring this technology to consumers in 2017,” stated Walter Hsueh, Director of Engineering at castAR. “We looked at several customizable Java frameworks and found that Broadleaf was best-suited to meet our needs for an open, scalable architecture.”
“We are so excited to see castAR leveraging Broadleaf in such a fun way,” said Brad Buhl, COO of Broadleaf Commerce. “Augmented reality is poised to become a disruptive technology and castAR is uniquely positioned as an early mover and leader in the space. We’re excited they’ve chosen to partner with Broadleaf for the ability to deliver unique online and in-game eCommerce experiences.”
Based on Java and Spring technologies, the Broadleaf framework will enable castAR to provide customers optimized omni-channel experiences, supporting both the castAR online store as well as the developer marketplace.
For more information about the eCommerce platform provider, or to learn more about the new partnership, visit: www.broadleafcommerce.com.
About castAR
castAR is developing an augmented reality entertainment platform that transforms a user's physical environment into a digital playground, combining hardware and software to create playful, social and approachable experiences. Funded by Playground Global, castAR aims to bring augmented reality to mainstream adoption. To learn more about castAR, please visit www.castAR.com.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, yet priced for the mid-market, Broadleaf provides the framework for leading brands, including Pep Boys, The Container Store, and O’Reilly Auto Parts. For more information, visit: www.broadleafcommerce.com.
0 notes
broadleafcommerce-blog · 8 years ago
Text
ICON Health & Fitness Selects Broadleaf Commerce for Multi-Site eCommerce Solution
ICON Health & Fitness (ICON), world leader of innovation, design and distribution of health and fitness equipment, announces it has selected Broadleaf Commerce as its next-generation eCommerce platform.
Managing several premier brands under the ICON name created intricate customization and multi-site requirements. ICON closely evaluated the Broadleaf platform to determine its ability to solve catalog, integration and scalability complexities across multiple web properties. Proven to boost development velocity and enhance SEO capabilities, the newly deployed ecosystem consolidates the operations of 15 ICON websites, including NordicTrack, ProForm, Altra Running, FreeMotion and iFit.
“A primary benefit of Broadleaf is its multi-site management capabilities, allowing us to write once and deploy everywhere - giving us a much faster rate of application development,” stated Tracy Cox, I.T. eCommerce Manager at ICON Health & Fitness. “The Broadleaf system is currently performing at a rate two times faster than our former system; deployments that previously took one to two hours are now completed in six minutes.”
“As the world’s leading distributor of exercise equipment, running shoes and other fitness gear, ICON manages a wide range of brands and innovative technologies,” said Elbert Bautista, Senior Architect at Broadleaf Commerce. “In partnership with the ICON team, we’ve worked to implement a customized multi-site solution to streamline business processes and developer workflow. Sites that were operating on various platforms can now be managed through one centralized environment.”
Dedicated to delivering seamless customer experiences, tests performed by ICON have indicated the system’s ability to support a 500% increase in orders-per-minute. For more information about the new ICON system implementation or the Broadleaf Commerce platform solution, visit: www.broadleafcommerce.com.
About ICON Health & Fitness
ICON Health & Fitness designs, markets and manufactures innovative fitness, health, outdoor products, services and technology.
ICON Health & Fitness has a 40-year history of helping people achieve their health and fitness goals with products from premier brands including NordicTrack, ProForm, Altra Running, iFit, FreeMotion, Weider and Weslo. ICON's worldwide headquarters are located in Logan, Utah with offices located throughout the world.
For more information visit http://www.iconfitness.com/.
About Broadleaf Commerce, LLC
Broadleaf Commerce provides B2B and B2C eCommerce platform solutions to simplify the complexities of multi-channel commerce and digital experience management. As the market-leading choice for enterprise organizations requiring tailored, highly scalable commerce systems, Broadleaf is fully customizable and extensible. Trusted by Fortune 500 corporations, Broadleaf provides the framework for leading brands, including Pep Boys, The Container Store, and O’Reilly Auto Parts.
For more information visit http://www.broadleafcommerce.com/.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Tailor Product Catalogs to Enhance Shopping Experiences: New Catalog Access Policies
Broadleaf Feature - Catalog Access Policies
Broadleaf's new Catalog Access Policy module was built with the purpose of providing curated B2B user experiences. The Catalog Access Policy allows users to control what parts of the catalog can be seen and who can see it by using Broadleaf's powerful rules-based engine. As one of the principle engineers working on this project, I am very excited to share use cases for this module, and how you could use this feature within your eCommerce website.
WHY CATALOG ACCESS POLICIES?
We discovered a demand, mostly in the B2B area of eCommerce, for the ability to control which parts of the catalog are visible for different accounts or users. For instance, we may have an account, X.Y.Z. Corporation, who only wants to purchase t-shirts, but our website contains t-shirts, hot sauces, gift cards, and other types of products. Rather than giving customers for X.Y.Z. Corporation access to the entire catalog, it might be best to only show them products that are t-shirts - decreasing the chances of purchasing the wrong type of product and removing the need to sift through a bunch of inapplicable products. In the past, this functionality required writing many lines of custom code and weeks of development to implement. The good news is, the new Catalog Access Policies capabilities were built with the B2B user in mind.
Now, once the module is installed, all one has to do is create a new policy and tie that policy to an account or segment of customers. It only takes the addition of one policy in order to ensure X.Y.Z. Corporation only sees t-shirts when shopping on our eCommerce website.
HOW DO I CREATE A POLICY?
We've talked about why you would want a policy, now let's look at our use case we defined above and start digging in on how we can set up a policy to help X.Y.Z. Corporation limit its catalog and improve its user's experience.
We need to start by navigating to the Catalog Access Policy section in the Broadleaf Administrative Interface.
Tumblr media
Currently we don't have any policies defined, so our next step is to click "Add Catalog Access Policy" and create a new policy.
Tumblr media
There is an abundance of metadata one can define for a policy such as: name, description, start/end dates, etc. For this example, we are going to give it a name, "X.Y.Z. Corporation Policy", and then set up some rules.
There are two rule-based concepts that make a policy: rules that decide who this policy applies to and then rules that decide what products and categories the user can browse.
Let's start off by defining who our rule applies to. To do this, we want to create a new "Account Rule". I have created a rule that specifies this policy applies to accounts with the name "X.Y.Z. Corporation".
Tumblr media
Now that we have defined who our policy applies to, let's define some rules that govern which parts of the catalog the user can see. To define access rules, we need to go to the Rules tab.
Tumblr media
We have both Product Attribute and Category rules that we can define. Product Attribute rules are based on Custom Fields defined on Products, while Category rules are rules based on Categories. For this example, we are going to define a rule for the "Product Domain" Custom Field in order to only show Products whose "Product Domain" is "T-Shirt".
This rule should do pretty well to ensure that we only see t-shirts, but to be safe, we should add a Category rule to include only the Merchandise category, since this is the only category that includes t-shirts.
Tumblr media
Now, we can save/approve our changes and go check them out on our site. Since this rule is targeting the "X.Y.Z. Corporation", we need to log into one of their accounts. I will log into Bill's account, [email protected].
Tumblr media
Bill can now only see the products that are important to his account. The example I gave here is a relatively simple one, but you can make these policies as complicated and verbose as you would like.
HOW DOES THIS ALL WORK?
The Catalog Access Policy module effects are wide-ranging, it touches search, url mapping, menus, checkout, and even the typeahead. It does this through the use of powerful MVEL expressions that are evaluated to determine whether the customer has access to a piece of the catalog.
One thing I didn't show - if you tried to manually visit a product page when logged into Bill's account, you would be presented with a 404. This is because we evaluate the policy's rules within our url mapping and if we find a certain product is not accessible, we don't allow the user to see the page. If you try to access a category page, you would see the same result. I won't go into the details of exactly how this is done behind the scenes, however, if you wanted to use a policy to lock down a page served by your custom controller, here is an example of how that would work:
// inject our service bean "blCatalogAccessPolicyService" @Resource(name = "blCatalogAccessPolicyService") protected CatalogAccessPolicyService policyService; protected boolean isBlockedByPolicy(Customer customer, Product product) { // find the highest priority policy that applies to our customer CatalogAccessPolicy policy = policyService.findCatalogAccessPolicyForCustomer(customer); if (policy != null) { return policyService.validateProductForPolicy(policy, product); } return false; }
The above use case is fairly simple and straightforward, but you may ask, how could it be so simple to apply this to a Solr query in custom search service? We already handle this out-of-box if you are using our SolrSearchService. However, if you wrote your own service or have a custom endpoint that uses Solr for searching products, you can filter your results using code similar to the following segment:
// inject our service bean "blCatalogAccessPolicyService" @Resource(name = "blCatalogAccessPolicyService") protected CatalogAccessPolicyService policyService; protected void attachCatalogAccessFilters(SolrQuery solrQuery, Customer customer) { // find the highest priority policy that applies to our customer CatalogAccessPolicy policy = policyService.findCatalogAccessPolicyForCustomer(customer); if (policy != null) { // generate the filter queries for this policy List<String> filterQueries = policyService.createSolrFiltersForPolicy(policy); if (CollectionUtils.isNotEmpty(filterQueries)) {    // iterate over each filter query and add it to the SolrQuery    for (String filterQuery : filterQueries) {        solrQuery.addFilterQuery(filterQuery);    } } } }
Behind the scenes createSolrFiltersForPolicy takes all of the rules you created and converts their MVEL expressions into the appropriate Solr filters. This allows a developer to very easily inject this functionality into your existing search services.
FINAL THOUGHTS
Broadeaf's new Catalog Access Policy module is a powerful tool for B2B eCommerce. I'm excited to see what people do with it and for feedback on how we can expand it further. If you found the concepts in this blog interesting, I am looking to release another blog in the next couple months that explores the power of using MVEL expressions and rule builders to create catered search experiences with Solr.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Creating Powerful Solr Filters Using MVEL Expressions
Parse the propertyName and propertyValues from the MVEL expressionRecently I was working on a project where the goal was to figure out a way to filter search results based on a dynamic set of rules. We were working within Broadleaf, which uses MVEL for its rule builders and Solr for its search engine. The purpose of this project was to limit the parts of a catalog that a segment of customers should be allowed to browse (check out our Catalog Access Policy module).
One of the most interesting parts of working on this project was the concept of taking MVEL rules and converting them into Solr filters. This type of pattern is powerful for two reasons:
Usability: rule builders are very user-friendly, and asking users to write Solr filters would be ridiculous.
Flexibility: MVEL rules are not only usable with Solr, you can evaluate them against a map, an object, or a different search engine.
From MVEL to Solr
So how do we create Solr filters from an MVEL expression? This process is fairly straightforward, and I will walk you through an example. We are going to take a rule that is intended to limit our results to a certain category.
I'm going to make the assumption in this section that you already know what MVEL expressions are. If you don't, I would suggest reading the Wikipedia entry for them before proceeding further. They are relatively simple, especially the ones we will be dealing with in our examples.
First off, let’s define our MVEL expression:
So what is this MVEL expression checking? It is checking if the category's ID exists in a set of IDs, where this set contains IDs 2003 and 2004. Here is what a similar Solr filter would look like:
Before we start converting our MVEL expression into a Solr filter, let's take a look at the structure of these statements:
Based on this structure, we need to do two things in order to transform this MVEL expression into a Solr filter:
Parse the propertyName and propertyValues from the MVEL expression
Find the fieldName for this propertyName and build the filter
Let's go ahead and code this out:
public static final Map PROPERTY_FIELD_MAP = new HashMap<>(); static { PROPERTY_FIELD_MAP.put("category.?id", "category"); } public String convertMVELToSolr(String mvel) { return getFieldNameForProperty(parsePropertyName(mvel)) + ":(\"" + parsePropertyValues(mvel).join("\" \"") + "\")"; } protected String parsePropertyName(String mvel) { return mvel.substring(mvel.indexOf("(") + 1, mvel.indexOf("[") - 2); } protected List parsePropertyValues(String mvel) { return mvel.substring(mvel.indexOf("[") + 1, mvel.indexOf("]")).split(","); } protected String getFieldNameForProperty(String propertyName) { return PROPERTY_FIELD_MAP.get(propertyName); }
Our new method convertMVELToSolr is now able to convert our MVEL expression into a Solr filter. Of course this could not handle all use cases, for instance, if the MVEL expression doesn't follow the same pattern. This is why you would want to flush this functionality out further by adding some regexes to check which pattern it matches and logic to handle each pattern accordingly. You would likely want to create a service that is responsible for providing you the fieldName for a given propertyName value. With a little work, you would be able to create a powerful MVELToSolr conversion service to use in your search application.
Applications
Using MVEL rules to build search filters has many interesting applications. Like we discussed earlier, usability is a huge one. Allowing an admin user to build rules that can be used to filter both domain entities and search results is very powerful.
Another application is within a microservice/micromodule environment. If you have your search logic in a separate service or domain than your rules, it would be relatively simple to send your rules in a request to your search service, and then your search service would handle converting those rules into Solr filters and applying it to a query. If later you decide not to use Solr and to switch in ElasticSearch, you would only have to worry about how to convert the rules in the ElasticSearch filters, and your rules domain can remain untouched.
Final Thoughts
Using MVEL rules to create Solr filters gives us a lot of flexibility and allows us to build a rich, customizable search experience. This is not always needed, however, especially if you have a very specific and detailed search configuration. If you are a developer and you are the only one who is ever going to touch the search configuration, you should probably just use a more static configuration and obscure things away from your business users. When requirements change and you need to quickly modify your search engine on the fly without having to make changes to the code, using MVEL rules to create Solr filters will make your life a lot easier.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Optimizing React Applications for Search Engines
When I first started learning and using React I always had the same thought in the back of my mind, "How do I ensure SEO with this thing?" React is a front-end JavaScript framework, much like Angular, Backbone, or Ember, so how do ensure SEO for a dynamic web application that is primarily rendered within the browser? This question came up again when I was porting a Broadleaf eCommerce application to React. The following are a few of the things I learned through the process of ensuring my React web application was SEO-friendly.
Server-side rendering
The first part of the problem I needed to solve was to find a way that Google's web crawler could crawl the webpage without having to run JavaScript and make network calls. Many front-end single-page applications tend not to fair well in this category. The whole idea around the single-page application is that the client does the work of rendering the app. My goal was to figure out how to render the page for the initial request, as well as any of the application state, so that the first request would be fully crawlable even if JavaScript were turned off. This can be fairly complicated to implement so I won't go into too much detail as others have explained it much better than I could (see redux and react-router documentation).
Rendering head meta-data on client/server
Server-side rendering is great and all, but how do I ensure my Homepage has different metadata than my Category pages? Also, how do I ensure that both the client and the server render the same head data for a page? Typically, for a server-side template engine, you can simply include the metadata within your returned template from your controller. However, for React you need to load the metadata in through Ajax. For my application, I decided to use Redux for storing my page metadata and I managed my page-specific head data in Broadleaf.
On the Broadleaf side, I have a custom endpoint that accepts a pageType and pathname, e.g. CATEGORY and /hot-sauces. Using these two values I can determine the Category and the corresponding metadata for that category. I then send back this head response JSON to my React application. I won't go into too many details for this side since it is really just a simple ad-hoc REST endpoint.
On the React side, I have a reducer and actions that handle dispatching the request and receiving the new head data. My setup is that each route has a function responsible for loading the data for that page, including the head data. I set up this function to run both server and client-side before the app is rendered. The result is that the Redux state is populated with the correct head data both client and server-side. Rendering the data into the head of the page could be complicated if I built it all myself, but thankfully there are several npm packages built around rendering head metadata for React apps. I decided to choose react-helmet.
If you are unfamiliar with React and Redux you may want to skip to the next section, otherwise we are going to briefly go into the details on how we set this up.
ACTION CREATORS
First, we need to start off by writing our action creators. For this we create a new file headActions.js, and our first task is to define the our action types:
// define our action types export const HeadActionTypes = {    REQUEST_HEAD : `REQUEST_HEAD`, // request our head data    RECEIVE_HEAD : `RECEIVE_HEAD`  // receive our head data }
Now that we have defined out action types we need to define our action creators that will create the actions for the types above.
/** * Creates an action that specifies a request for head data. * @param  {String} pageType the type of the page, e.g. CATEGORY or page * @param  {Object} location the location we are grabbing head data for * @return {Object}          the action */ function requestHead(pageType, location) {    return {        type : HeadActionTypes.REQUEST_HEAD,        // the pageType will be used to specify the entity type on the backend        pageType,        // the pathname will be used to determine the proper head metadata        pathname : location.pathname,    } } /** * Creates an action that handles receiving head data * @param  {String} pageType the type of the page * @param  {Object} location the location for the head * @param  {Object} head     the head data * @return {Object}          the action */ function receiveHead(pageType, location, head) {    return {        type : HeadActionTypes.RECEIVE_HEAD,        // the pageType will be used to specify the entity type on the backend        pageType,        // the pathname will be used to determine the proper head metadata        pathname : location.pathname,        head    } }
Now, we need to create a more complicated action that does the following: 1. Check to see if we should fetch head data 2. Dispatch request action 2. Callout to our Head REST endpoint 3. Dispatch receive action with response
/** * Checks to see if the head data for this pathname already exists in the state or if * we are already fetching the head data for this pathname. */ function shouldFetchHead(state, pathname) {    return !state.headByPath[pathname]        || !state.headByPath[pathname].isFetching } /** * Creates a thunk action that dispatches the request, fetches the data, then * dispatches receiving the data for the given location. This is the primary * method that our containers will use to fetch the correct metadata. * @param  {String} pageType the page type * @param  {Object} location the location * @return {function}        thunk function */ export function fetchHead(pageType, location) {    return (dispatch, getState) => {        if (!shouldFetchHead(getState(), location.pathname)) {            return undefined // (1) if we don't need to fetch head data, return        }        // (2) dispatch the requestHead to notify we are fetching data        dispatch(requestHead(pageType, location))        // (3) fetch the head data        return fetch(`/head/${pageType}?pathname=${location.pathname}`, {            headers : {                'Content-Type' : `application/json`            }        })        // convert to json        .then(response => response.json())        // (4) dispatch the receiveHead to notify we are done fetching data        .then(head => dispatch(receiveHead(pageType, location, {head})))    } }
This should be the last of the action creators needed, next we take on setting up the reducers.
REDUCERS
We require two reducers for handling the head actions. The first is responsible for taking the head response for a page and reducing it to an object with attributes page type, pathname, and head data. The second calls upon the first and is responsible for organizing the head states by pathname, which will allow us to cache the head data for multiple URLs. Our goal is to have our head state organized like the following JSON structure:
headByPath : { '/' : { isFetching : false, head : { title : 'The Heat Clinic', ... }, pageType : 'PAGE', pathname : '/', }, '/hot-sauces' : {...} }
We now need to create a new file named headReducer.jsand will start by creating out first reducer.
import {HeadActionTypes} from '../actions/headActions' import merge from 'lodash/merge' /** * Handles reducing the action into the head state * @param  {Object} [state={     isFetching : false,     head : {},     pageType : null,     pathname : null,    }] the initial head state * @param  {Object} action     the action to be reduced * @return {Object}            the reduced state */ function head(state = {    isFetching : false,    head : {},    pageType : null,    pathname : null, }, action) {    switch(action.type) {        case HeadActionTypes.REQUEST_HEAD:        return merge({}, state, {            isFetching : true,            pageType : action.pageType,            pathname : action.pathname,        })        case HeadActionTypes.RECEIVE_HEAD:        return merge({}, state, {            isFetching : false,            pageType : action.pageType,            pathname : action.pathname,            head : action.head,        })        default:        return state    } }
Now that we have a reducer to reduce the actions into the head state, we need to organize our head state by pathname.
/** * Handles reducing the action into the head state by pathname * @param  {Object} [state={}] the initial state * @param  {Object} action     the action to be reduced * @return {Object}            the reduced state */ export function headByPath(state = {}, action) {    switch(action.type) {        case HeadActionTypes.REQUEST_HEAD:        case HeadActionTypes.RECEIVE_HEAD:        return merge({}, state, {            // we ensure the head state is organized by pathname            [action.pathname] : head(state[action.pathname], action)        })        default:        return state    } }
Now we have our reducers and our actions set up. The next step is creating our container for rendering the head data into the page.
CONTAINER
import React, {PropTypes} from 'react' import {connect} from 'react-redux' import Helmet from 'react-helmet' import merge from 'lodash/merge' class HeadContainer extends React.Component {     constructor(props) {          super(props)     }     render() {          return (               <Helmet {...this.props.head}/>          )     } } /** * We map the head state to our components props. * * @param  {Object} state    the global state * @param  {Object} ownProps our component's base props * @return {Object}          our component's new props */ function mapStateToProps(state, ownProps) {     let {location} = ownProps     let defaultProps = {          head : {               defaultTitle : `The Heat Clinic`          }     }     return merge(defaultProps, state.headByPath[location.pathname]) } export default connect(mapStateToProps)(HeadContainer)
Now that we have our container, we need to ensure all of our routes render it. This can be done using a layout component or by simply adding it to each route's component.
FETCHING HEAD STATE
Now that we have our container rendering, we need to add support for fetching the head state for our routes. To do this, we just need to use connect to inject our fetchHead action into our router components and then ensure we load this data on both the server and the client.
RENDERING ON SERVER
Lastly, since we don't have a dom on the server we need to modify our index file to contain the head attributes. Here is my way of handling this:
function renderHtml(html, initialState) {     let head = Helmet.rewind()     return new Promise((resolve, reject) => {          resolve(`               <!DOCTYPE html>               <html ${head.htmlAttributes.toString()}>                    <head>                         ${head.title.toString()}                         ${head.meta.toString()}                         ${head.base.toString()}                         ${head.link.toString()}                         ${head.script.toString()}                         ${head.style.toString()}                    </head>                    <body>                         <div id="mount">${html}</div>                         <script type="text/javascript" charset="utf-8">                              window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}                         </script>                         <script src="/bundle.js"></script>                    </body>               </html>               `)     }) }
Above we call Helmet.rewind() to get the head attributes in JSON format and then render those attributes within the head and HTML tags.
SEO-Friendly URLs
One of the things I needed to ensure was that my React had SEO-friendly dynamic URLs. Even more than that, I had to ensure that the routing could be dynamically determined from the Broadleaf RESTful API. This would require me to create a custom endpoint to determine which routes to use by pathname in Broadleaf and setting up my router in React to allow for asynchronous routing. On the Broadleaf side this was pretty simple, I just created a custom routing endpoint that responded with a page type for a given pathname. On the React side this was a little bit more complicated. Thankfully, I was using react-router, which allows for asynchronous routing. I set up my child routes to be tied to the result of that request to my routing endpoint within Broadleaf. If the pathname matched a category route, I chose the category routes; if it was a content managed page, I chose the page routes, etc. The end result is that the routing for my application was dynamic and asynchronously loaded from Broadleaf. This gives a lot of power to the admin user to influence the URL structure of their pages without having to open up an IDE.
Closing thoughts
Learning how to ensure SEO for this project boosted my confidence in working with React. I initially had doubts about how it would meet certain criteria, but in the end I found it to be an effective solution. While there are several aspects of SEO I didn't get to, I'm confident they are all easily solvable.
0 notes
broadleafcommerce-blog · 8 years ago
Text
Broadleaf Commerce's Upgrade to Thymeleaf 3
Thymeleaf, a server-side Java template engine, has been Broadleaf's go-to templating language for both our admin, and demo site since moving to it a couple of years ago, so we were excited when we heard that version 3 released in early May 2016. Soon after the release we decided to start an effort to move to Thymeleaf 3. Being one of the first (and probably the first company) to do so we relied pretty heavily on documentation released by the developers of Thymeleaf along with well documented GitHub issues that were made for the major feats they wanted to accomplish in Thymeleaf 3. The ten minute guide, created for Thymeleaf 3, covers most of the basics on what changed from v2.1 and v3.0, but, for a more in depth explanation on what changed with the underlying processor APIs, we relied more on Thymeleaf's GitHub issues.
THE UPGRADE PROCESS
Template Changes
th:inline is no longer needed to use the inline syntax (i.e. null)
HTML needs to be valid HTML5 because Thymeleaf 3 uses a new HTML parser instead of XML parser
Removing
th:inline
All Thymeleaf 2 HTML works in Thymeleaf 3, but the th:inline="text" attribute is no longer needed. The functionality still exists but now you can simply just use the inline syntax, null, anywhere you like.
Fixing malformed HTML
Given this is never a good thing, malformed HTML was allowed in Thymeleaf 2 because malformed HTML doesn't mean it's malformed XML and Thymeleaf 2 used an XML parser. This means that <div/> was fine in v2.1 because the backend would convert it to <div></div> before sending it to the client. On the contrary, Thymeleaf 3 uses a DOM parser, AttoParser 2.0. Therefore, it doesn't mind parsing <div/> so it'll send it to the client. This is a problem, though, because the browser wants correct HTML5, but a div is a non void tag therefore the browser turns the <div/> into <div> and then guesses where the matching closing tag goes. This causes problems because it doesn't normally put the close tag where you originally intended.
Backend Changes
Updating some enums that changed (such as LEGACYHTML5 for template resolvers).
Updating our variable expression evaluator to use SpelVariableExpressionEvaluator instead of IExpressionObjectFactory.
Updating all of our processors to extend the new classes that were made in Thymeleaf 3.
Finding a new way to change the global model.
Moving to a Java based layout dialect since the dialect we previously used was rewritten in Groovy which caused a noticeable performance decrease.
Updating our processors
The large majority of upgrading to Thymeleaf 3 was updating our processors so that they use the new classes and API. Broadleaf has around 40 processors that extend various classes that Thymeleaf provides for creating processors and all of them have changed in the upgrade. There's obviously a learning curve to know which Thymeleaf 3 classes replaced the Thymeleaf 2 classes we were previously using, but there wasn't anything that we couldn't do in v3.0 that we could do in v2.1.
New approach to modifying the global model
The largest problem we ran into was modifying the global model that's used when evaluating the template. Needless to say this isn't the best thing to do even in Thymeleaf 2, but, nonetheless, we needed the functionality so that clients can seamlessly use their current HTML with Thymeleaf 3. Previously you could modify this via the Arguments parameter sent to the processor, but in version 3 Arguments was removed in favor of a new ITemplateContext object which doesn't have access to the global model. We worked around this by setting an attribute on the WebRequest. Since SpEL actually evaluates using the WebRequest this was a viable solution. In the future we plan to convert all of the processors that alter global state to just alter the node's local variables.
Fixing performance by switching layout dialects
Luckily around the time we were doing this upgrade ultraq's layout dialect had been updated to use the new Thymeleaf 3 APIs so were able to simply include it in our template engine like we had before. Unfortunately the dialect had been rewritten to use Groovy which, in turn, hurt the performance of Thymeleaf. After finding this out we searched for an alternative and found a fork of ultraq's project which was written completely in Java. We did performance testing with this new project and found that now Thymeleaf 3 was significantly more performant than it's predecessor. Compared to using Thymeleaf 2 with ultraq's layout dialect we had a 68% better average response time and 5% better throughput with 90 users, and 156% better average response time and 23% better throughput with 135 users using Thymeleaf 3 with the Java fork. During this search we also realized that in the future, when we deprecate Thymeleaf 2 support, that we could easily replace these third party dependencies by using Thymeleaf 3's fragment expression. Since this is an out of box solution, the performance should be even better.
BROADLEAF'S BACKWARDS COMPATIBILITY SOLUTION
Now that we have the initial upgrade done we were able to evaluate the differences and similarities so that we could create a common layer. The idea was to write the processors once so that they could live inside the core framework. This has huge advantages because we'd be able to completely remove the dependency of Thymeleaf in the event that a client wanted to run Broadleaf headless instead of it serving the HTML. We created a separate maven project that would hold the common layer, a sub module that would have no Thymeleaf dependency, so that it could be a dependency included in the core framework. This consists of mostly interfaces. We created two additional sub modules that would hold the implementations of the common layer interfaces for Thymeleaf 2 and Thymeleaf 3 separately. Even though this was a great design we did have to come up with a creative process of injecting the processor code that lived in the core framework into the version specific implementations of the processor APIs. We were able to accomplish this with Spring Java configuration since we were able to look up all of the beans that extended a specific class that lived in the common module.
// BroadleafProcessor is the common interface all of our processors implement Collection<BroadleafProcessor> blcProcessors = applicationContext.getBeansOfType(BroadleafProcessor.class).values();
// We loop to see which exact type it is because many abstract methods // exist in our common layer depending on the function the processor performs for (BroadleafProcessor proc : blcProcessors) {    if (BroadleafModelVariableModifierProcessor.class.isAssignableFrom(proc.getClass())) {        iProcessors.add(createDelegatingModelVariableModifierProcessor((BroadleafModelVariableModifierProcessor) proc));    } else if (BroadleafTagTextModifierProcessor.class.isAssignableFrom(proc.getClass())) {        iProcessors.add(createDelegatingTagTextModifierProcessor((BroadleafTagTextModifierProcessor) proc));    } ... }
After capturing these classes we create a new instance of the version specific implementation that implemented the common class that we queried on and injected the bean found as a property on the new instance.
// Now we create the version specific implementation. This example is in our Thymeleaf 3 // Java config therefore we instantiate the Thymeleaf 3 implementation protected static DelegatingThymeleaf3ModelVariableModifierProcessor createDelegatingModelVariableModifierProcessor(BroadleafModelVariableModifierProcessor processor) {    return new DelegatingThymeleaf3ModelVariableModifierProcessor(processor.getName(), processor, processor.getPrecedence()); }
// This is the actual class that does all of the Thymeleaf 3 specific // boiler plate functions before delegating the actual work to the // broadleaf processor that we injected in our Java config public class DelegatingThymeleaf3ModelVariableModifierProcessor extends AbstractElementTagProcessor {    protected BroadleafModelVariableModifierProcessor processor;    public DelegatingThymeleaf3ModelVariableModifierProcessor(String elementName, BroadleafModelVariableModifierProcessor processor, int precedence) {        super(TemplateMode.HTML, processor.getPrefix(), elementName, true, null, false, precedence);        this.processor = processor;    }    ...    // This specific processor does a function called "populateModelVariables"    // where it modifies "newModelVariables". After the method returns    // DelegatingThymeleaf3ModelVariableModifierProcessor actually adds the    // variables to the global model the way you do it in Thymeleaf 3    processor.populateModelVariables(tag.getElementCompleteName(), attributes, newModelVariables, blcContext);    ... }
The redesign of how we incorporated Thymeleaf in Broadleaf gave us additional advantages such the ability to easily add support for a different template language or a new version of Thymeleaf. We would simply have to create a new submodule that implemented the classes in the common module. Additionally it gave us the ability to do all of the boiler plate code for setting up Thymeleaf in the submodules instead of in the core framework or in the client's code. This made it to where clients could simply add a maven module in their POM if they wanted Thymeleaf.
In conclusion, upgrading from Thymeleaf 2.1 to Thymeleaf 3.0 not only profited us new features and better performance, but it also gave us a chance to redesign how we supported Thymeleaf for our clients. Now clients can easily remove Thymeleaf as a dependency, use Thymeleaf 2, or use Thymeleaf 3 by simply adding a different dependency or not including one at all.
0 notes